如何为 Mozilla 和 Chrome 等不同浏览器提供 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13118247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to provide CSS properties for Different browsers like Mozilla and Chrome
提问by James Smith
If I would like to give a unique property to a page (say index.html) for different browsers. For example : Blue background for Chrome and Red Background for Firefox, then how can I write a CSS code to this case?
如果我想为不同浏览器的页面（例如 index.html）提供唯一属性。例如：Chrome 的蓝色背景和 Firefox 的红色背景，那么我如何为这种情况编写 CSS 代码？
回答by Victor Gutierrez
Using CSS Media Queries (Chrome/Safari)
使用 CSS 媒体查询 (Chrome/Safari)
@media not all and (-webkit-min-device-pixel-ratio:0)
{
#example
{
width: 200px;
}
}
Chrome/Safari specific css file (Chrome/Safari)
Chrome/Safari 特定的 css 文件 (Chrome/Safari)
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />
Here is a CSS Hacks list
这是一个 CSS Hacks 列表
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
回答by James Smith
First up, browser sniffing is bad and you will almost certainly regret doing it.
首先，浏览器嗅探很糟糕，你几乎肯定会后悔这样做。
However, if you must, you could do it server-side like this: Browser sniffing with .htaccess
但是，如果必须，您可以像这样在服务器端执行此操作：Browser sniffing with .htaccess
Ideally though, stick with best practice, which is to use conditional comments in your HTML to handle old versions of IE, and write CSS that deliberately works consistently cross-browser.
理想情况下，坚持最佳实践，即在您的 HTML 中使用条件注释来处理旧版本的 IE，并编写有意跨浏览器一致工作的 CSS。
回答by FredFloete
You can try this:
你可以试试这个：
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
Source: https://stackoverflow.com/a/1706221/1087653
来源：https: //stackoverflow.com/a/1706221/1087653
Or you can use commands like:
或者您可以使用以下命令：
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
回答by j.j.
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari">
<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari">
This is a bug in WebKit/Blink and Chrome plans to fix it in version 50, so it will no longer work.
这是 WebKit/Blink 中的一个错误，Chrome 计划在版本 50 中修复它，因此它将不再起作用。
http://code.google.com/p/chromium/issues/detail?id=286682
http://code.google.com/p/chromium/issues/detail?id=286682
https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/nH1O6WszMgo
https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/nH1O6WszMgo
