不同浏览器的不同CSS文件

Question

我想对不同的浏览器类型使用不同的CSS文件。 是否有任何简单的HTML代码可以检测不同类型的浏览器并相应地包含CSS文件？

Answer 1

不要使用CSS hacks，Javascript来切换样式表或类似的东西。

我从来没有为不同的浏览器或任何无效的CSS hack使用多个样式表。

它不需要。 条件注释对于IE6及以下版本的PNG修复程序很有用，但是从此看来，如果您知道CSS和各种浏览器错误，则可以轻松地为IE 5.5编写XHTML和CSS，而不会出现很多问题。

Answer 2

这是一个javascript类型的东西。 Javascript非常适合浏览器选择。 只需使用浏览器检测指向不同的CSS文件即可。

把这样的东西放在头上：

<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>

我无法确认js，但这与您需要做的事情类似。

Answer 3

您必须使用服务器端在所有浏览器上执行此操作。 如果选择服务器端方式，则必须解析User-Agent标头，并从该解析中添加有效的CSS。 我建议您不要这样做，因为User-Agent解析是一项繁琐的任务，并且有更优雅的方式来处理浏览器怪癖。

值得一提的是，如果您只想为Internet Explorer添加特殊的CSS规则（文件），则有一种特殊的语法：

<!--[if lte IE 6]>

适用于IE 6及更高版本

另外请注意，有一些CSS框架要避免具有针对每个浏览器的规则。 我认为最大的一个可能是YUI 3 Grid 。 如果使用正确，这将在所有浏览器上提供相同的外观。

Answer 4

我只知道：

<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->

还js检测

Answer 5

与浏览器相关的样式表有几种不同的技术：

1）如前所述，您可以使用条件语句来检测IE版本，例如

2）如果使用的是PHP，Ruby等服务器端语言，则可以基于HTTP_USER_AGENT服务器变量检测浏览器，例如

if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
    print "Firefox user."; $firefox = true;
    // process here for firefox browser
}

这项技术非常强大，因为您几乎可以检测到任何浏览器，并且可以基于此浏览器将PHP模板中包含任何所需的.css文件（准确地说是将其打印）。 例如

if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">';

此技术的优点是，它最早出现，甚至在页面开始发送给用户之前，您就可以非常准确地检测到浏览器版本。

3）当然，您可以使用javascript检测浏览器版本，这仅需要几个变量，例如

var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

但是，如本例所示 ，应使用分析此变量值的代码。

Answer 6

在同一样式表中通常更容易使用“ hacks”。

这不是为了宽容他们的使用（因为我不想被福音传教士贬低：）

http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

http://ajaxian.com/archives/css-browser-hacks

http://www.456bereastreet.com/archive/200411/the_underscore_hack/

对于不同的IE版本（通常是最重要的版本），有一个条件IE'if'可以处理许多参数： http : //www.quirksmode.org/css/condcom.html

Answer 7

如果您尝试包括特定于Internet Explorer的CSS文件，则条件HTML注释会起作用。 有关更多信息，请参见此quirksmode文章 。

对于其他浏览器，您必须使用JavaScript或服务器端检测访问者正在使用的浏览器，并根据结果包含适当的CSS文件。 关于quirksmode的另一篇很棒的文章在这里 。

Answer 8

您应该考虑改变对不同浏览器使用不同样式表的愿望。

对于所有浏览器，几乎所有事情都可以使用相同的样式表完成。 进行清晰的标记和使用可靠的样式需要更多的工作，但是您获得的不仅是更少的CSS文件，而且还有一个很有可能在您从未听说过的浏览器以及将来版本中工作的页面浏览器。 此外，经过深思熟虑的标记使盲人浏览者可以访问该页面，并且使搜​​索引擎的工作更加轻松，从而使他们很可能将您的更多内容编入索引。

这就是我在公司网站上使用的内容。 在发布IE 8时，我无需更改任何一项即可使其正常运行。 :)

请注意， 正确的文档类型对于在浏览器之间实现一致的行为至关重要。 如果没有它，IE将从IE 4模仿大多数渲染错误，包括不正确的box模型 。

Answer 9

您可以使用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>

Answer 10

<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>