Html 不同浏览器的不同 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1706196/
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
Different CSS files for Different Browsers
提问by Flins
I want to use different CSS files for different browser types. Is there any simple HTML code which can detect different types of browsers and include CSS files accordingly?
我想为不同的浏览器类型使用不同的 CSS 文件。是否有任何简单的 HTML 代码可以检测不同类型的浏览器并相应地包含 CSS 文件？
回答by Hux
Don't use CSS hacks, Javascript to switch style sheets or anything like that.
不要使用 CSS hacks、Javascript 来切换样式表或类似的东西。
I've never ever had to use multiple style sheets for different browsers or any invalid CSS hacks.
我从来没有必要为不同的浏览器或任何无效的 CSS hack 使用多个样式表。
Its not needed. The conditional comments are useful for maybe IE6 and below for the PNG fix stuff, but appart from that, if you know CSS and the various browser bugs you can easily code XHTML and CSS for IE 5.5 without many problems.
它不需要。条件注释可能对 IE6 及以下版本的 PNG 修复内容很有用，但除此之外，如果您了解 CSS 和各种浏览器错误，您可以轻松地为 IE 5.5 编写 XHTML 和 CSS，而不会出现很多问题。
回答by Jonno_FTW
This is a javascript type thing. Javascript is very good for browser selection. Just use the browser detection to point to a different css file.
这是一个 javascript 类型的东西。Javascript 非常适合浏览器选择。只需使用浏览器检测指向不同的 css 文件即可。
Put something like this in the head:
把这样的东西放在头上：
<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>
I can't confirm the js but that is along the lines of what you need to do.
我无法确认 js，但这符合您需要做的事情。
回答by RageZ
you have to use the server side to do that on all browser. If you choose the server side way, you would have to parse the User-Agentheader and add the valid CSS from that parsing. I advise you not to do thatbecause User-Agent parsing is a tedious task and there is more elegant way to deal with browser quirks.
您必须使用服务器端在所有浏览器上执行此操作。如果您选择服务器端方式，则必须解析User-Agent标头并添加来自该解析的有效 CSS。我建议您不要这样做，因为 User-Agent 解析是一项乏味的任务，并且有更优雅的方法来处理浏览器的怪癖。
Worth to be noted that if you are interested only adding special CSS rules(files) for Internet explorer there is a special syntax:
值得注意的是，如果您只想为 Internet Explorer 添加特殊的 CSS 规则（文件），则有一个特殊的语法：
<!--[if lte IE 6]>
for IE 6 and up
对于 IE 6 及更高版本
Also please note there is some CSS framework to avoid to have per browser rules. The biggest one in my opinion is probably YUI 3 Grid. This would give you the same look and feels on all browsers if used properly.
另请注意，有一些 CSS 框架可以避免每个浏览器的规则。在我看来，最大的可能是YUI 3 Grid。如果使用得当，这将在所有浏览器上为您提供相同的外观和感觉。
回答by x2.
I know only for ie:
我只知道对于 ie：
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
also js detection
还有js检测
回答by AlexA
There are several different techniques for browser-dependent stylesheets:
浏览器相关的样式表有几种不同的技术：
1)Like already said, you can use conditional statements to detect IE versions, e.g.
1)如前所述，您可以使用条件语句来检测 IE 版本，例如
2)If you're using server-side language like PHP, Ruby etc., you can detect browser based on HTTP_USER_AGENT server variable, e.g.
2)如果您使用的是 PHP、Ruby 等服务器端语言，则可以根据 HTTP_USER_AGENT 服务器变量检测浏览器，例如
if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
print "Firefox user."; $firefox = true;
// process here for firefox browser
}
This technique is powerful because you can detect virtually any browser and based on this you can include (or print, to be precise) any required .css file into your PHP template. E.g.
这种技术非常强大，因为您几乎可以检测任何浏览器，并且基于此，您可以将任何需要的 .css 文件包含（或打印，准确地说）到您的 PHP 模板中。例如
if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">';
The advantage of this technique is that it occurs earliest, even before the page starts getting sent to user and you can detect browser version very exactly.
这种技术的优点是它发生最早，甚至在页面开始发送给用户之前，您可以非常准确地检测浏览器版本。
3)And of course you can detect browser version with javascript, this requires just a couple variables, e.g.
3）当然你可以用javascript检测浏览器版本，这只需要几个变量，例如
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
But the a code analyzing values of this variables should be used, like in this example.
但是应该使用分析这个变量值的代码，就像在这个例子中一样。
回答by SamGoody
It is usually easier to use 'hacks' within the same stylesheet.
在同一个样式表中使用“hacks”通常更容易。
This is not to condone their use (as I don't want to be modded down by evangelists :))
这不是宽恕他们的使用（因为我不想被传道者修改：））
http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
http://www.dynamicsitesolutions.com/css/filters/support-chart/
http://www.dynamicsitesolutions.com/css/filters/support-chart/
http://ajaxian.com/archives/css-browser-hacks
http://ajaxian.com/archives/css-browser-hacks
http://www.456bereastreet.com/archive/200411/the_underscore_hack/
http://www.456bereasttreet.com/archive/200411/the_underscore_hack/
For the different IE versions (usually the most important) there is a conditional IE 'if' which can handle lotsof parameters: http://www.quirksmode.org/css/condcom.html
对于不同的 IE 版本（通常是最重要的），有一个条件 IE 'if' 可以处理很多参数：http: //www.quirksmode.org/css/condcom.html
回答by Eric Lennartsson
Conditional HTML comments works if you're trying to include CSS files specific to Internet Explorer. See this quirksmode articlefor more information.
如果您尝试包含特定于 Internet Explorer 的 CSS 文件，则条件 HTML 注释会起作用。有关更多信息，请参阅此 quirksmode 文章。
For other browsers, you'd have to either use JavaScript or server-side detect which browser the visitor is using, and depending on the result, include the suitable CSS file. Another great article on quirksmode about that here.
对于其他浏览器，您必须使用 JavaScript 或服务器端检测访问者使用的浏览器，并根据结果包含合适的 CSS 文件。关于 quirksmode 的另一篇很棒的文章在这里。
回答by Guffa
You should consider to change your wish to use different style sheets for different browsers.
您应该考虑改变对不同浏览器使用不同样式表的愿望。
Almost everything is possible to do with the same style sheet for all browsers. It requires a bit more work for making a clean markup and using robust styles, but what you gain is not just fewer css files, but a page that is very likely to work also in browsers that you have never heard of, and future versions of the browsers. Also a well thought out markup makes the page accessible for blind surfers, and it makes the job easier for search engines so that they are likely to index more of your content.
几乎所有浏览器都可以使用相同的样式表做任何事情。制作干净的标记和使用健壮的样式需要做更多的工作，但是您获得的不仅仅是更少的 css 文件，而是一个很可能在您从未听说过的浏览器以及未来版本中工作的页面浏览器。此外，经过深思熟虑的标记使盲人冲浪者可以访问该页面，并使搜索引擎的工作更轻松，因此他们可能会索引更多您的内容。
That is what I have used on our company's web site. I didn't have to change a single thing to make it work when IE 8 was released. :)
这是我在我们公司的网站上使用的。当 IE 8 发布时，我无需更改任何东西即可使其正常工作。:)
Note that a proper doctypeis crucial for getting a concistent behaviour across browsers. Without it IE emulates most rendering errors back from IE 4, including an incorrect box model.
请注意，正确的文档类型对于跨浏览器获得一致的行为至关重要。没有它 IE 会从 IE 4 中模拟大多数渲染错误，包括不正确的盒模型。
回答by Deepak
<head>
<link rel="stylesheet" type="text/css" href="generic.css" />
<![if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="notie.css" />
<![endif]>
</head>
回答by jaisonDavis
You can use JavaScript to detect and change the css for different browsers but the code is a bit bulky.
您可以使用 JavaScript 来检测和更改不同浏览器的 css，但代码有点庞大。
<script type="text/javascript">
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')) )
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
if (browserName == "Microsoft Internet Explorer") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">");
}
else if (browserName == "Firefox") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">");
}
</script>
