现在基本不用CSS hack了——IE6–IE9已退出主流,现代浏览器标准支持良好,!important、私有前缀、@supports足以覆盖兼容需求;真需hack时优先选条件注释或属性后缀,禁用选择器hack。

现在基本不用 CSS hack 了——IE6–IE9 已退出主流,现代浏览器对标准支持良好,!important、私有前缀、@supports 足以覆盖绝大多数兼容需求。真遇到必须 hack 的场景(比如维护老系统),优先选条件注释或属性后缀,别碰选择器 hack。
IE 条件注释只在 HTML 中有效,CSS 文件里写不了
条件注释是 HTML 层面的语法,只能出现在 里的 或内联 中,不能塞进外部 CSS 文件。它只对 IE 有效,其他浏览器直接忽略整段注释。
-
:仅 IE6 加载 -
:IE8 及以下执行 JS -
:非 IE 浏览器加载
注意:IE10+ 已完全移除条件注释支持, 也得配好,否则可能触发怪异模式。
\9 和 \0 后缀能跨 IE 版本,但会污染可读性
这些是属性值末尾的字符串后缀,靠 IE 对非法转义序列的容错实现识别:color:red\9 被 IE6–IE10 解析为 color:red,而 Firefox/Chrome 直接丢弃整条声明。
-
margin:10px\9;:IE6–IE10 生效 -
display:block\0;:IE8–IE10 生效(IE7 及更早不认\0) -
width:100px\9\0;:IE9–IE10 生效(\9\0是双重过滤)
问题在于:现代 CSS 工具链(如 PostCSS、Stylelint)会报错;VS Code 默认标红;团队新人看不懂;而且一旦误写成 ; 少了空格或分号,整条规则就废了。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
选择器 hack 如 *html 已彻底失效,别再用
*html .box { width:200px; } 这类写法依赖 IE6 对通配符解析的 bug,IE7 开始已修复,Chrome/Firefox 从来就不认。现在写它,等于白加一行无效代码。
-
*html:仅 IE6(已淘汰) -
*+html:IE7(已淘汰) -
:root .box:Firefox/Chrome/Safari,但 IE9+ 也支持:root,不是可靠区分手段
想兼容现代浏览器差异,请用 @supports (display: grid) 做特性检测,而不是赌某个选择器只有某浏览器认。
真正难搞的不是写法本身,而是 hack 一旦混进项目,就会像幽灵一样附着在后续所有样式逻辑里——你改一个 margin,得同步检查所有带 \9 的地方是否还成立;重构时不敢删旧类名,因为不知道哪条 hack 正指着它。所以,能用 normalize.css 统一默认样式,就别 hack;能用 @supports 检测特性,就别猜浏览器版本。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










