:hover伪类在不同浏览器中存在解析差异：firefox在select>option等嵌套结构中禁用:hover，chrome部分支持，旧版safari可能误匹配div>a:hover；应避免用:hover控制关键交互，改用mouseenter/mouseleave事件，并在chrome、firefox、edge及safari中分别测试。
没有本质差异，但解析细节和边界行为会导致实际表现不一致。
:hover伪类触发时机不一致
Chrome 和 Firefox 对 :hover 的触发逻辑不同：Firefox 在某些嵌套结构（如 select > option）中完全禁用 :hover，而 Chrome 允许部分样式生效；旧版 Safari 可能忽略 div > a:hover 中的子选择器限制，误匹配更宽范围。
- 避免用
:hover控制关键交互（比如下拉菜单显隐），改用mouseenter/mouseleave事件更可靠 - 测试必须覆盖 Chrome、Firefox、Edge（Chromium 内核），Safari 单独加测——它的层叠解析最保守
- 优先写
.btn:hover，而非nav .btn:hover，减少浏览器在层级判断上的实现分歧
IE11 的 !important 处理异常
当两个规则都带 !important 且权重相同时，IE11 按 CSS 声明顺序处理，而不是标准规定的“后声明优先”，容易回退到前一条规则。
- 别依赖
!important强行覆盖，先检查是否因未加:root或媒体查询导致作用域失效 - 在 IE11 环境下，用更具体的选择器替代，例如把
.card .title改成body .card .title - 若用 CSS-in-JS（如 styled-components），确认生成的 class 名没被 IE11 截断或重复复用
层叠上下文创建条件不统一
z-index 错乱常源于不同浏览器对触发层叠上下文的属性敏感度不同：Chrome 对 transform: translateY(0) 敏感，Firefox 可能忽略，而 Safari 在某些版本中甚至对 opacity: 0.99 就触发新上下文。
- 检查所有可能创建层叠上下文的属性：
opacity 、<code>transform、filter、will-change - 统一用数字型
z-index（如z-index: 1000），避免auto或initial - 给模态框根容器加
transform: translateZ(0)（兼容方案）或isolation: isolate（现代方案）
真正难搞的不是权重计算本身，而是浏览器对“何时开始计算”“在哪一级上下文中计算”的实现偏差。DevTools 的 Computed 面板里看 Specificity 数值只是起点，得盯着“哪些规则被划掉”“为什么被划掉”才能定位真实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
