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解决方案怎么样：Browser Detection。阅读一下这个类，以便更好地澄清，该文件基本上做的只是这样的概念：

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" />');
}

祝你好运，希望这有帮助！

Answer 2

您可以使用条件注释来定位IE浏览器。看看这个：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/。要定位firefox，您可以查看以下答案：https://stackoverflow.com/a/953491/1941910。但我认为没有必要针对firefox，chrome或safari，他们都很好地应用CSS。

Answer 3

您可以在服务器端执行此操作。

if(Request.UserAgent is chrome){        
    //here output chrome stylesheet
}

Answer 4

对，

<link rel="stylesheet" type="text/css" browser="mozillafirefox" href="includes/firefox.css" />
<link rel="stylesheet" type="text/css" browser="googlechrome" href="includes/chrome.css" />
<link rel="stylesheet" type="text/css" browser="msinternetexpl" href="includes/ie.css" />

每个浏览器有不同的CSS？

4 个答案: