针对 Chrome、IE、Firefox 的 CSS 检查

Question

在渲染我的网站时，我注意到三个主要浏览器中的一个小对齐问题。 因此，如何使用纯 CSS 执行以下伪代码？

if Webkit (Safari/Chrome) {
    #myDIV {margin-top:-3px}
} else if (Firefox) {
    #myDIV {margin-top:0px}
} else { // IE and other browsers
    #myDIV {margin-top:1px}
}

Answer 1

您可以使用 CSS Hack。 但是，我不会推荐它。

对于 IE，您可以在条件注释中包含一个单独的 CSS 文件或<style>标签，如下所示：

<!--[if IE] <tag> <![endif]-->

Answer 2

如果它只有一个属性，则不需要条件注释来包含其他文件。 但如果你想要那样做，就像 SLaks 已经写的那样。 另一种方法是使用特定于浏览器的 hack 在特定类的末尾添加一个属性。

.foo {
  margin-top: 5px; // general property
  _margin-top: 2px; //IE 6 and below
}

或者，您将类分开并在通用类下添加浏览器特定类。

/* general */
foo {
   width : 20em;
}

/* IE 6 */
* html foo {
   width : 27em;
}

/* IE 7 */
* + html foo {
   width : 29em;
}

Answer 3

你真的不能用纯 CSS 来做到这一点。 最好的方法是使用服务器端代码（如 ASP.NET 或 PHP）读取 HTTP 请求的“用户代理”标头，并通过搜索该字符串中的关键字来确定访问者使用的浏览器。 例如，我的用户代理是：

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

您可以做的是使用一组 if-else 语句在用户代理中查找字符串，例如“Firefox”或“MSIE”或“WebKit”，然后根据所使用的浏览器提供不同的单独 CSS 文件。

你可以用 JavaScript 做同样的事情，但请记住，用户可能禁用了 JavaScript，或者更有可能他们的设备可能不支持它......而实际上任何 HTTP 请求都会发送一个用户代理字符串。