什么是CSS hack

CSS的“hack”主要指的是某些样式仅应用于目标浏览器，而其他浏览器忽略这些样式！

让我们来看一个css hack的例子：

* html .sidebar {
  margin-left: 5px;
}

上述示例中的 CSS（通常称为“star-html hack”）将仅针对 Internet Explorer 版本 6 及以下版本。其实大部分兼容IE6的工程师也只是兼容到IE6,之前的版本也不会关注！所以这种写法也成为IE6-only hack。

在这个例子中，“hack”部分是星号后跟“html”。这是通用选择器和元素类型选择器的组合。这样的组合尽在某些版本的IE中有效，其他浏览器中无效。这也意味着上面代码示例中定义的元素的左边距将仅适用于 IE6 或更早版本。在这种情况下，CSS 实际上是有效的，因此您不会收到有关它的错误或警告。

下面来看一个来自 Browserhacks 网站的示例，这次针对的是 IE11。

_:-ms-fullscreen, :root .selector {
  margin-left: 5px;
}

我不会详细说明为什么这是一个 hack（部分原因是我不完全确定我理解它），但上面的 CSS 将仅适用于 Internet Explorer 版本 11。从技术上讲，Browserhacks 说 ‘IE11 和以上’，所以我假设这意味着它也可以在 Microsoft 的 Edge 浏览器中运行，但我还没有验证过。

CSS Hacks 是无效的 CSS 吗？

如果样式表中有 hack，如果通过 W3C 的 CSS 验证器运行它，这些 CSS 可能会产生警告或错误。但是这种方法也并不能确认这些CSS是否是hack。

css中可能回包含hack并且不会产生警告或错误，例如上面的针对IE6的hack，就不会报错！

此外，一些 hack（如我上面讨论的 IE11 hack）使用供应商特定的代码（例如:-ms-fullscreen）。在这种情况下，验证器中的默认设置可能会显示带有“通过”绿屏消息的 CSS：

W3C Validator 绿色通行证屏幕

但是，往下滚动，会看到如下警告：

在这种情况下，它会警告我，因为 :-ms-fullscreen 被认为是“未知的供应商扩展伪类”。如果更愿意将这种 CSS 视为错误而不仅仅是警告，可以使用验证器输入区域下方的“更多选项”部分调整验证器的设置：

如果样式表包含供应商前缀或其他特定于浏览器的 CSS（不一定是 hack），则将“供应商扩展”选项更改为“错误”将阻止样式表通过验证。

另一方面，你可能会使用这样的东西：

.example {
  margin-left: 5px\9;
}

上面的 CSS 针对 IE8 及以下版本。“hack”是反斜杠和九的组合(\9)。大多数浏览器会忽略整行，因为该\9部分使该行无效 CSS。但是，无论出于何种原因，Internet Explorer 版本 8 及更低版本仍将其视为有效并应用边距设置。

但是，在这种情况下，无论为验证器选择什么设置，它都会显示错误消息并且样式表将无法通过验证：