IE中::before不生效，需同时写:before和::before且:before在前；伪元素继承font-family但不继承font-size；Safari中content:url()需用绝对路径；transform:scale()会导致模糊，应优先调font-size。
双冒号::before在IE中完全不生效
IE8及更早版本根本不支持双冒号语法，IE9–11虽识别::before但会静默降级为忽略——不是报错，是“假装没看见”。这意味着你写了::before却看不到任何内容，调试时容易误判为CSS优先级或DOM问题。
- 真实场景：用
::before做图标、装饰线、状态标记，上线后发现IE里空了一块 - 兼容写法必须同时声明单冒号和双冒号，且单冒号在前：
.btn::before, .btn:before { content: "→"; } - 构建工具（如PostCSS）自动补全时，也要确认它生成的是
:before在前、::before在后，顺序反了在IE里照样失效
伪元素继承font-family但不继承font-size的怪现象
::before和::after默认继承父元素的font-family，但font-size会重置为浏览器默认值（通常是16px），除非显式设置。这导致文字大小突然变小、图标字体错位、行高塌陷。
- 典型错误：只设
content和font-family，结果::before里的图标比预期小一圈 - 安全做法是显式继承：
font-size: inherit;或直接设具体值，比如font-size: 14px; - 若用字体图标（如Font Awesome），还需注意
font-weight是否匹配，某些图标需font-weight: 900才显示正确字形
伪元素content里写url()图片在Safari中加载失败
Safari对content: url(...)的路径解析非常严格：相对路径以CSS文件位置为基准，而非HTML页面；且不支持data: URI（部分旧版甚至拒绝加载SVG内联base64）。
- 现象：Chrome正常显示小图标，Safari控制台报
Failed to load resource，但无具体URL提示 - 解决路径必须用绝对路径或根相对路径，例如
content: url(/assets/icon-check.svg);，避免../img/这类写法 - 更稳妥的方式是改用
background-image+display: inline-block模拟，兼容性更好，也便于控制尺寸和响应式缩放
伪元素被transform: scale()拉伸后模糊
当对包含::before的元素整体应用transform: scale(0.8)，伪元素的像素会被非整数倍缩放，触发浏览器亚像素渲染，文字或线条边缘发虚——尤其在Retina屏上明显。
- 这不是bug，是CSS渲染机制决定的；
scale()本质是GPU变换，不重新光栅化内容 - 如果必须缩放，优先对伪元素自身加
transform，并配合will-change: transform提示浏览器优化 - 更干净的解法：直接调整
font-size或width/height，让缩放发生在布局阶段而非绘制后
伪元素的“伪”字不是白叫的——它没有真实DOM节点，不触发重排但影响重绘，调试时看不见、查不到、有时连getComputedStyle都取不到完整样式。真要保底，别只靠::before撑功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
