1

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

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

4

4 回答 4

3

绝对可以，这是一篇很好的文章，展示了如何做到这一点，它说这通常被认为是不好的做法- 应该避免。但是，在需要大量遗留支持的高度复杂或以设计为导向的站点中，如果知道并接受这些警告，这通常是不可避免的。总而言之-请不要这样做！

于 2013-11-12T13:10:40.280 回答
1

对于 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]-->
于 2013-11-12T13:14:01.693 回答
1

最高版本 9 的 Internet Explorer 支持条件注释，它允许您获取一些 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 版）存在明显的 bug，并且其标准支持比其他浏览器少得多，所以通常使用条件注释来修复它。Paul Irish 和其他人建议使用条件注释在您的页面上包含几个 HTML 标记，它们上的类标识正在使用的 IE 版本，以便您可以将特定于 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]-->

（但是请注意，这会阻止X-UA-Compatible元标记工作，除非您在 doctype 之前包含一个空的条件注释。您可以看到为什么人们热衷于放弃对旧版本 IE 的支持。）

其他浏览器不支持类似的机制。正如@ExtPro 答案中的链接所示，浏览器通常确实存在某种它们独有的 CSS 解析错误，您可以使用它来定位该浏览器的代码。然而，一旦你走上这条路，你就依赖于错误的行为。就您所知，您不想针对的未来浏览器可能会意外包含相同的错误。一般来说，最好的方法是按照标准编写代码，并解决您在特定浏览器中发现的任何错误。

还值得记住的是，有些东西（例如表单控件）在不同的浏览器中看起来并不相同，这没关系。它通常不会让最终用户感到困惑。

于 2013-11-12T13:15:05.230 回答
0

我发现了这个老问题，因为我有同样的问题，所以我搜索了。也许这对您来说是一个很好的解决方案。至少对我来说是。所以这里有一段代码，说明如何为不同的浏览器使用不同的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>

希望它是有帮助的。

于 2015-03-20T09:37:42.557 回答