每个浏览器的不同的CSS？ [英] Different CSS for each browser?

问题描述

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

Is there a way to load a different CSS file for a specific browser?

like（poor pseudo code）：

like (poor pseudo code):

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

推荐答案

所需的理想解决方案不存在：

不幸的是，如果你试图在HTML本身上做一个跨浏览器解决方案不存在。但是，它将适用于大多数版本的IE。像这样：

Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:

<!--[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解决方案：浏览器检测。阅读有关这个​​类的一些更清楚，这个文件基本上是做的只是一个概念如下：

How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:

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

显然，它不仅仅是检测浏览器类型。事实上，它知道版本，操作系统和更多的细节，你可以阅读在该链接。但是，它会去并检查所有类型的浏览器，将chrome替换为mozilla，explorer等...

Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing 'chrome' with 'mozilla', 'explorer' and so on...

css文件，只需跟随如下的条件语句：

Then to add your css files, just follow up with conditional statements like so:

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

祝你好运，希望这有助！

Good luck and hope this helps!

这篇关于每个浏览器的不同的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！