为不同的浏览器使用不同的样式表

Using A Different StyleSheet For Different Browsers?

本文关键字：样式 浏览器      更新时间：2023-09-26

到目前为止，我使用这个JS来加载一个不同的样式表，如果一个指定的浏览器。但目前，它对我不起作用。它不显示任何样式表。我找不出什么毛病。

<script type="text/javascript">
if ( $.browser.mozilla == true ) {
  document.write("<link type='"text/css'" rel='"stylesheet'" href='"css'FF.css'">");
}
</script>
<script type="text/javascript">
if ( $.browser.chrome == true ) {
  document.write("<link type='"text/css'" rel='"stylesheet'" href='"css'Chrome.css'">");
}
</script>

上面的注释是正确的，这不再是一个JQuery函数。

当你说你这样做是因为内容看起来不同，尝试使用这些工具代替:

  • http://modernizr.com/-将允许您通过什么元素工作的样式，而不是什么浏览器你在
  • http://necolas.github.io/normalize.css/-将有助于标准化元素的默认样式
  • http://jigsaw.w3.org/css-validator/
  • http://validator.w3.org/-有效代码更可能在所有浏览器中工作。

如果做不到这一点，在这里问一个具体的问题(理想情况下使用jsfiddle)——很少有css不能在所有新浏览器上工作，或者没有一个简单的解决方案是不可能的。

还有:现在几乎不可能在所有的浏览器上进行测试，因为有这么多的浏览器，所以知道一个脚本可以在你测试过的所有浏览器上运行，应该会给你信心，它也可以在你没有测试过的浏览器上运行。

这个特性在jQuery 1.9中被移除:http://jquery.com/upgrade-guide/1.9/

在本页中，建议使用此库获得以下功能:http://modernizr.com/

您可以使用JavaScript来检测和更改不同浏览器的css，但是代码有点庞大。

使用链接

不同浏览器的不同CSS文件

Chrome测试纯javascript版本;Firefox。应该在Opera上工作。过去在你想要的页面上。最好放在

的底部
document.addEventListener("DOMContentLoaded",browsercss);
function browsercss() {
    navigator.sayswho = function () {
        var c = navigator.userAgent,
            b, a = c.match(/(opera|chrome|safari|firefox|msie|trident(?='/))'/?'s*('d+)/i) || [];
        if (/trident/i.test(a[1])) return b = /'brv[ :]+('d+)/g.exec(c) || [], "IE " + (b[1] || "");
        if ("Chrome" === a[1] && (b = c.match(/'bOPR'/('d+)/), null != b)) return "Opera " + b[1];
        a = a[2] ? [a[1], a[2]] : [navigator.appName, navigator.appVersion, "-?"];
        null != (b = c.match(/version'/('d+)/i)) && a.splice(1, 1, b[1]);
        return a.join(" ")
    }();
    var stylesheet = "";
    if (navigator.sayswho.indexOf('Chrome') >= 0) {
        stylesheet = 'http://example.com/chrome.css';
    }
    if (navigator.sayswho.indexOf('Mozilla') >= 0) {
        stylesheet = 'http://example.com/mozilla.css';
    }
    if (navigator.sayswho.indexOf('Opera') >= 0) {
        stylesheet = 'http://example.com/mozilla.css';
    }
    loadcss = document.createElement('link');
    loadcss.setAttribute("rel", "stylesheet");
    loadcss.setAttribute("type", "text/css");
    loadcss.setAttribute("href", stylesheet);
    document.getElementsByTagName("head")[0].appendChild(loadcss);
}
相关文章：