如何解决带前缀伪类与标准伪类兼容性问题？

在前端开发中，CSS 伪类和伪元素是实现交互与视觉效果的关键手段。只是因为浏览器厂商对 CSS 规范支持的不一致，特别是带前缀的伪类与标准伪类混用时兼容性问题层出不穷。下面整理了常见痛点、原因还有方法，方便你定位并修复这类问题。

一、问题背景

说到你可能会遇到，某些浏览器忽略整个规则集样式无效或显示异常。至于典型场景包括，

• :read-only 与 -moz-read-only 同时写在同一条规则里导致 Chrome 或 IE 忽略该规则。
• ::before/::after 在 IE8 以下只能使用单冒号。
• @keyframes 在旧版 IE 需加 -ms-keyframes 前缀。

二、常见痛点拆解

1. 前缀与标准选择器混合导致整条规则失效

"跳过整个声明块。

2. 伪元素双冒号 vs 单冒号兼容性差异

"IE8及以下只支持 ::before 的单冒号形式". 如果你的代码只写了双冒号，那么老旧浏览器将完全忽略该样式。不过，

3. 带前缀属性顺序错误导致覆盖失败

"若把标准属性写在前缀属性之前。