利用 CSS 属性前缀兼容 IE6、IE7 与标准浏览器

竹里

发布时间：2026-10-14| 4人浏览过

原创

掌握一种简单的 CSS Hack 方法，利用属性名的特殊前缀来区分处理 Firefox、IE7 和 IE6 的渲染差异，无需引入额外脚本即可实现样式兼容。

CSS 兼容性问题的常见场景

在不同版本的 Internet Explorer（特别是古老的 IE6 和 IE7）中，盒模型解析和对 CSS 属性的支持存在差异。为了在不影响现代浏览器（如 Firefox、Chrome、Safari 等）的前提下，针对性地为旧版 IE 设置样式，开发者常使用 "Hack" 技术。其中，通过修改 CSS 属性名称的前缀或后缀是最直接的方式之一。

第1步：为标准浏览器编写基础样式

首先编写适用于大多数现代浏览器的标准 CSS 代码。在示例中，我们设定元素的高度为 20px。Firefox 和其他非 IE 内核浏览器会正常读取这一行代码。

.example {
    height: 20px; /* 适用于 Firefox 及其他标准浏览器 */
}

第2步：使用星号 (*) 过滤 IE7 及以下版本

在 CSS 规范中，属性名前的星号 * 是非法字符，标准浏览器会自动忽略这一行。然而，IE8 之前的版本（包括 IE7 和 IE6）会尝试解析它。利用这一点，可以针对这些旧版 IE 提供替代方案。通常将需要覆盖的值写在这一行，例如将高度调整为 25px。

*height: 25px; /* 适用于 IE7 和 IE6 */

第3步：使用下划线 (_) 专门针对 IE6

下划线 _ 虽然也是非法前缀，但 IE6 对它的容忍度甚至高于 IE7。更重要的是，IE7 在解析完带星号的代码后，如果遇到下划线，往往不会再次应用，或者行为与 IE6 不同。因此，这成为隔离 IE6 的特权通道。若需要 IE6 保持与其他浏览器一致的 20px 高度，可在此处声明。

_height: 20px; /* 仅适用于 IE6 */

完整示例与应用效果

将上述三层代码组合在一起，并按顺序书写，浏览器将根据自身特性执行对应的规则。最终的结构如下：

.target-element {
    height: 20px;     /* For Firefox / Standard Browsers */
    *height: 25px;    /* For IE7 & IE6 */
    _height: 20px;    /* For IE6 */
}

执行逻辑说明：

Firefox / Chrome / Safari 等：忽略 * 和 _ 开头的行，仅应用 height: 20px;。
IE7：忽略 _ 开头的行，应用 *height: 25px;。
IE6：先应用 *height: 25px;，随后又被 _height: 20px; 覆盖（取决于具体解析器的权重习惯，通常建议将最具体的 hack 写在后面以确保生效），最终呈现 20px 的高度。