Html 每个浏览器都有不同的 CSS?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14227531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:49:57  来源:igfitidea点击:

Different CSS for each browser?

htmlcss

提问by gVidal

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

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

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

回答by Mathew Kurian

Ideal solution you want does not exist:

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

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:

不幸的是,如果您尝试在 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]-->

So the best solution:

所以最好的解决办法是:

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:

像这样的 Javascript 解决方案怎么样:Browser Detection。阅读有关此类的一些信息以更好地阐明,该文件基本上所做的只是这样的概念:

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

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

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

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

然后要添加您的 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" />');
}

Good luck and hope this helps!

祝你好运,希望这能帮到你!

回答by Angel Yan

You can use conditional comments to target IE browsers. Look at this: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. To target firefox you can check this answer: https://stackoverflow.com/a/953491/1941910. But I think there's no need to target firefox, chrome or safari, they all do a good job applying CSS.

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

回答by yukaizhao

you can do this at the server end.

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

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