在 CSS 中，为什么某些属性前面有星号（*）？

天天向上

发布： 2024-12-28 17:57:49

原创

94 人浏览过

在 CSS 中，某些属性前面有星号（*）是为了兼容 Internet Explorer (IE) 浏览器，特别是 IE 6、IE 7 和 IE 8 版本。这种做法并不是标准的 CSS 语法，而是特定于这些浏览器的 hack（技巧或“补丁”），用来处理这些浏览器的兼容性问题。

1. **星号 Hack (`*property`)**：

在某些情况下，使用星号作为前缀（例如 *property）可以让特定的 CSS 属性只在 IE 6 和 IE 7 中生效。IE 6 和 IE 7 会解释以星号开头的 CSS 属性，但现代浏览器会忽略它们。这是一种针对 IE 6 和 7 的浏览器特定的 hack。

示例：`*zoom`

*zoom: 1;

这个属性用于 触发“hasLayout”（IE 特有的概念），它会使元素获得更好的渲染效果。在 IE 6 和 IE 7 中，某些情况下需要使用 *zoom: 1; 来解决布局问题，特别是使浮动元素正确清除浮动。现代浏览器不理解 *zoom 属性，所以它们会忽略它。

2. 其他 IE 特有的 Hack：

(a) **`display` 和 `position`**

有时候需要使用 *display 或 *position 属性来解决 IE 6/7 特定的布局问题。

*display: inline-block;  /* 针对 IE 6 和 IE 7 进行优化 */

(b) **`*+html` 选择器**

IE 6 和 IE 7 在处理某些 CSS 选择器时存在问题，所以有时候使用特定的选择器前缀（如 *+html）来强制应用 CSS 规则。

*+html .example {  /* 只应用于 IE 6 */
  color: red;
}

这意味着 *+html 只会影响 IE 6，确保其他浏览器不受影响。

3. 为什么 IE 需要这些 Hack？

IE 6 和 7 的 CSS 引擎与现代浏览器相比，存在许多渲染和兼容性问题。这些浏览器不完全遵守 CSS 标准，导致开发者需要使用不同的方法来修复特定的样式问题或使页面显示正确。因此，CSS hack 如 *zoom、*display 等被广泛使用。

4. 现代浏览器不再需要这些 Hack

随着 IE 8 之后的版本的推出，IE 逐渐改进了对标准 CSS 规范的支持，同时现代浏览器（如 Chrome、Firefox、Edge）也更好地支持了 CSS，开发者不再需要使用这些前缀来处理布局问题。

5. 替代方案

现代开发中，随着 IE 逐步退出主流，CSS Hack 的使用越来越少，开发者可以使用更好的兼容性解决方案，如：

CSS 自适应布局（使用 flexbox、grid 等布局方式）。
CSS 重置（Normalize），来处理不同浏览器的默认样式。
CSS 前缀（如 -webkit-、-moz- 等）来处理特定浏览器的实现细节，但这与 IE Hack 不同，它们是官方标准的一部分。

总结：

星号前缀（如 *property）是为了兼容老旧的 IE 6 和 IE 7，解决它们在渲染和布局时的兼容性问题。它们不是标准的 CSS 语法，并且现代浏览器和新版的 IE（IE 9 及以上）已不再需要这些 hacks，开发者应该尽量避免使用这些过时的技术。

1. 星号 Hack (*property)：

示例：*zoom