Question

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

Answer 1

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

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

不需要它。对于PNG修复工具，条件注释对于IE6及以下版本非常有用，但是从中可以看出，如果你知道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。我建议你不要这样做因为用户代理解析是一项繁琐的工作，并且有更优雅的方式来处理浏览器怪癖。

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

<!--[if lte IE 6]>

用于IE 6及以上

另请注意，有一些CSS框架可以避免每个浏览器规则。我认为最大的可能是YUI 3 Grid。如果使用得当，这将为所有浏览器提供相同的外观和感觉。

Answer 4

我只知道ie：

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

也js detection

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
}

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

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

但应使用分析此变量值的代码，例如this example。

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'可以处理 lot 参数： http://www.quirksmode.org/css/condcom.html

Answer 7

如果您尝试包含特定于Internet Explorer的CSS文件，则条件HTML注释有效。有关详细信息，请参阅this quirksmode article。

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

Answer 8

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

几乎所有浏览器都可以使用相同的样式表。它需要更多的工作来制作干净的标记和使用健壮的样式，但你获得的不仅仅是更少的css文件，而是一个非常可能在你从未听说过的浏览器中工作的页面，以及未来的版本浏览器。此外，经过深思熟虑的标记使盲人冲浪者可以访问该页面，并且它使搜索引擎的工作更容易，因此他们可能会为您的内容编制更多内容。

这就是我在公司网站上使用的内容。当IE 8发布时，我没有必要改变一件事来使它工作。：）

请注意，proper doctype对于跨浏览器获取一致行为至关重要。没有它，IE会从IE 4中模拟大多数渲染错误，包括incorrect box model。

Answer 9

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

Answer 10

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

不同浏览器的不同CSS文件

10 个答案: