Question

我正在使用一个在某些浏览器中正常工作的css文件，而不是在IE和Safari等其他浏览器中。

是否有任何技术可以使用不同的 .css 和 .js 文件来实现不同的浏览器兼容性？

Answer 1

当然，this is a great article showing how to do it表示它通常被认为是不良行为 - 应该避免。然而，在需要大量遗留支持的高度复杂或设计导向的站点中，如果已知并接受警告，则通常是不可避免的。总而言之 - 请不要这样做！

Answer 2

对于safari，你不需要任何特殊的CSS。对于IE，常见的用途是创建一个覆盖某些样式的特殊css：

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

Answer 3

Internet Explorer（最高版本9）支持conditional comments，它允许您获取一些HTML并将其显示或隐藏在特定版本的IE中。您可以使用它将特定的CSS和JavaScript文件传递到某些版本的Internet Explorer。例如：

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

<!--[if lt IE 9]>
<link rel="stylesheet" href="less-than-ie-9.css">
<![endif]-->

因为IE（直到版本9）明显有问题并且标准支持明显少于其他浏览器，因此通常会使用条件注释来修复它。 Paul Irish and others suggest using conditional comments to include several HTML tags on your page, with classes on them identifying which version of IE is being used，这样您就可以将IE特定的CSS保存在与CSS其余部分相同的样式表中。例如：

<!--[if lt IE 7]><html lang="en" class="lte-ie9 lte-ie8 lte-ie7 lte-ie6"><![endif]-->
<!--[if IE 7]>   <html lang="en" class="lte-ie9 lte-ie8 lte-ie7"><![endif]-->
<!--[if IE 8]>   <html lang="en" class="lte-ie9 lte-ie8"><![endif]-->
<!--[if IE 9]>   <html lang="en" class="lte-ie9"><![endif]-->
<!--[if !IE><!--><html lang="en"><!--<![endif]-->

（但请注意，this prevents the X-UA-Compatible meta tag from working, unless you include an empty conditional comment before the doctype。您可以看到为什么人们热衷于放弃对旧版IE的支持。）

其他浏览器不支持类似的机制。正如@ExtPro’s answer中的链接所示，浏览器通常会有一些对它们唯一的CSS parsin错误，您可以使用它来在该浏览器上定位代码。然而，一旦你沿着这条路走下去，你就依赖于越野行为。众所周知，您不希望定位的未来浏览器可能会意外地包含相同的错误。通常，最好的方法是编写标准代码，并解决在特定浏览器中发现的任何错误。

还值得记住的是，有些东西（例如表单控件）在不同的浏览器中看起来不一样，这没关系。它通常不会混淆最终用户。

Answer 4

我找到了这个老问题，因为我有同样的问题，所以我搜索了。也许这对你来说是个好方法。至少对我而言。所以这里是一个如何为不同的浏览器使用不同styles.css的代码。

只有javascript：

<script type="text/javascript">
        var cssId = 'myCss';
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.media = 'all';

        /*----------------------------------------------------------------*/
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        var isFirefox = typeof InstallTrigger !== 'undefined';
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        var isChrome = !!window.chrome && !isOpera; 
        var isIE = /*@cc_on!@*/false || !!document.documentMode;

    if (!document.getElementById(cssId)){
        var output = "";
        if(isFirefox){
            output += "Firefox";
                link.href = 'firefox.css';
                head.appendChild(link);
        }
        else if(isChrome){
            output += "Chrome";
                link.href = 'chrome.css';
                head.appendChild(link);
        }
        else if(isSafari){
            output += "Safari";
                link.href = 'safari.css';
                head.appendChild(link);
        }
        else if(isOpera){
            output += "Opera";
                link.href = 'opera.css';
                head.appendChild(link);
        }
        else if(isIE){
            output += "IE";
                link.href = 'ie.css';
                head.appendChild(link);
        }
        document.body.innerHTML = output;
    }
    </script>

希望它有用。

如何为不同的浏览器使用不同的CSS文件？

4 个答案: