发表新帖
发表新帖

Different CSS files for Different Browsers

前端 未结
关注
10 939
情深已故
情深已故 2020-12-17 07:48

I want to use different CSS files for different browser types. Is there any simple HTML code which can detect different types of browsers and include CSS files accordingly?<

相关标签:
10条回答
  • 迷失自我
    2020-12-17 07:50

    I know only for ie:

    <!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->

    also js detection

    0 讨论(0)
  • 醉梦人生
    2020-12-17 07:50

    You should consider to change your wish to use different style sheets for different browsers.

    Almost everything is possible to do with the same style sheet for all browsers. It requires a bit more work for making a clean markup and using robust styles, but what you gain is not just fewer css files, but a page that is very likely to work also in browsers that you have never heard of, and future versions of the browsers. Also a well thought out markup makes the page accessible for blind surfers, and it makes the job easier for search engines so that they are likely to index more of your content.

    That is what I have used on our company's web site. I didn't have to change a single thing to make it work when IE 8 was released. :)

    Note that a proper doctype is crucial for getting a concistent behaviour across browsers. Without it IE emulates most rendering errors back from IE 4, including an incorrect box model.

    0 讨论(0)
  • 醉梦人生
    2020-12-17 07:53

    Conditional HTML comments works if you're trying to include CSS files specific to Internet Explorer. See this quirksmode article for more information.

    For other browsers, you'd have to either use JavaScript or server-side detect which browser the visitor is using, and depending on the result, include the suitable CSS file. Another great article on quirksmode about that here.

    0 讨论(0)
  • 难免孤独
    2020-12-17 07:54 
    <head>

<link rel="stylesheet" type="text/css" href="generic.css" />

<![if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]>

<![if !IE]>
<link rel="stylesheet" type="text/css" href="notie.css" />
<![endif]>

</head>
    0 讨论(0)
  • 鱼传尺愫
    2020-12-17 07:55

    you have to use the server side to do that on all browser. If you choose the server side way, you would have to parse the User-Agent header and add the valid CSS from that parsing. I advise you not to do that because User-Agent parsing is a tedious task and there is more elegant way to deal with browser quirks.

    Worth to be noted that if you are interested only adding special CSS rules(files) for Internet explorer there is a special syntax: 

    <!--[if lte IE 6]>

    for IE 6 and up

    Also please note there is some CSS framework to avoid to have per browser rules. The biggest one in my opinion is probably YUI 3 Grid. This would give you the same look and feels on all browsers if used properly.

    0 讨论(0)
  • 悲哀的现实
    2020-12-17 08:00

    This is a javascript type thing. Javascript is very good for browser selection. Just use the browser detection to point to a different css file.

    Put something like this in the head:

    <script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>

    I can't confirm the js but that is along the lines of what you need to do.

    0 讨论(0)
 看不清?
提交回复
热议问题