每个浏览器使用不同的CSS？

Question

有没有办法为特定的浏览器加载不同的CSS文件？

像（伪代码差）：

if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />

Answer 1

您想要的理想解决方案不存在：

不幸的是，如果您尝试在HTML本身上进行操作，则不存在跨浏览器解决方案。但是，它将适用于大多数版本的IE。像这样：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

所以最好的解决方案是：

这样的Javascript解决方案怎么样：浏览器检测。阅读有关此类的内容以更好地弄清该文件的基本作用，就是这样的概念：

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

显然，它不仅可以检测浏览器的类型。实际上，它知道版本，操作系统以及您可以在该链接中阅读的更多详细信息。但是，它确实可以通过将“ chrome”替换为“
mozilla”，“ explorer”等来检查所有类型的浏览器…

然后要添加css文件，只需遵循如下条件语句即可：

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

祝你好运，希望这能帮到你！