每个浏览器都有不同的CSS？答案

【问题标题】：Different CSS for each browser?每个浏览器都有不同的CSS？
【发布时间】：2013-01-09 02:45:41
【问题描述】：

有没有办法为特定浏览器加载不同的 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" />

【问题讨论】：

双发...请参考stackoverflow.com/a/2644080/1100536
你有什么理由为每个浏览器提供特定的样式表？

标签： html css

【解决方案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" />');
}

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

【讨论】：

条件 cmets 仅适用于 Internet Explorer（并且仅适用于特定版本，我认为 8 是最后一个支持它的版本）。 OP 希望将不同的文件提供给非 IE 浏览器。
它仍然是一个糟糕的答案。 UA 嗅探从来都不适合提供内容。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：