IE8–IE11中::before/::after不显示内容，主因是伪元素未显式声明display且父元素为inline时被忽略；必须设display: inline-block或block，content避免为空或font-size: 0未重置，Unicode用XXXX格式。
IE8–IE11中::before和::after不显示内容？先看display默认值
IE对伪元素的display推导比现代浏览器更严格：当伪元素没有显式设置display，且父元素是inline（比如、）时，IE可能完全忽略content渲染。这不是bug，是旧版CSS规范实现差异导致的——它不会自动将伪元素设为display: inline，尤其在父元素未触发BFC或未声明position时。
实操建议：
- 所有
::before/::after规则必须显式声明display，不要依赖浏览器默认 - 优先用
display: inline-block而非inline：它既保持行内流行为，又支持width/height/vertical-align等控制，兼容性最稳 - 若需绝对定位，搭配
position: absolute时，display可设为block或inline-block，但不能省略
为什么display: inline在IE下有时仍不生效？
即使写了display: inline，某些场景下IE仍不显示伪元素内容，常见于：content为空字符串、含纯空白字符、或父元素设置了font-size: 0但未重置伪元素字体大小。
实操建议：
- 避免
content: ""单独存在——至少加一个不可见字符，如content: "0"（ 的Unicode） - 若父元素
font-size: 0用于清除间隙，务必给伪元素单独设font-size: 12px（或继承值），否则IE可能因字号为0而跳过渲染 -
vertical-align: middle在display: inline伪元素上IE支持差，改用display: inline-block+vertical-align更可靠
IE9+中content含HTML实体或引号时的转义陷阱
IE对content属性中的反斜杠转义处理不一致：例如content: "→"在IE9–10可能显示为字面字符串"→"而非箭头符号；而content: "92"（Unicode十六进制）才稳定生效。
实操建议：
- 禁用直接写中文标点或HTML实体（如
→），全部转为Unicode十六进制格式，如92、c（“） - 双引号包裹的
content值中，若需字面反斜杠，写两个：content: "\2192"（IE会吃掉一个） - 使用工具校验：在线Unicode转换器输入符号，复制XXXX格式，粘贴到CSS中
伪元素配合visibility: hidden或opacity: 0在IE下的隐藏失效
IE8–10中，若伪元素本身display未设，再叠加上visibility: hidden或opacity: 0，可能导致整个伪元素被跳过解析——不是隐藏，是根本没创建DOM节点。
实操建议：
- 隐藏伪元素必须分两步：先确保
display已设（如display: inline-block），再加visibility: hidden或opacity: 0 - 慎用
opacity做隐藏：IE8不支持opacity，需回退到filter: alpha(opacity=0)，且该滤镜在伪元素上兼容性极差，优先选visibility - 调试技巧：临时加
background: red和border: 1px solid，确认伪元素是否真正被渲染出来
最易被忽略的是：很多开发者只在Chrome/Firefox里验证了伪元素样式，却没意识到IE连content字符串都没解析——它不报错，只是静默跳过。只要伪元素规则里缺display，其他所有样式都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
