針對 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 請求都會發送一個用戶代理字符串。