Question

虽然我在网上做了一些优化，但我在Safari上遇到了一些麻烦。

我有一些CSS命令，在Safari 8上可能已经破解（可能不受支持？），Safari 9和所有其他浏览器都可以。

我想修复safari 8的代码，而不是使用不同的（并且更复杂的）结构来破坏和重建我的代码以实现相同的输出。

所以：这是一种定位方式！仅限！ safari版本8？

定位可以是任何 -

作为html中的评论，就像＃34的旧评论一样;如果是IE7＆＃34;
就像CSS一样（但是-webkit针对所有webkit浏览器，而不仅仅是safari）
，如javascript / jquery

那么，有什么建议吗？

Answer 1

您可以使用浏览器检测并添加或不添加（取决于浏览器）类body（例如<body class="is-safari-8">）。在CSS中，您可以设置仅适用于.is-safari-8及其后代的特定规则。

浏览器检测本身可以在服务器端或客户端完成。虽然服务器端可能更好，但我假设您打算在客户端执行此操作。为此你可以使用一个库（你应该找到几个快速的谷歌搜索，但它可能是一种矫枉过正，因为你只是寻找一个特定的情况）或编写自己的脚本来检查用户代理。

这是一个有用的资源，可以帮助您入门： https://developer.mozilla.org/en/docs/Web/API/Navigator

旁注：用户代理可以伪造（但这可能不会成为问题）。

更重要的是：您可能想要查找https://modernizr.com/。它是一个功能检测脚本。它可能允许您以更灵活的方式解决您的问题。

Answer 2

有许多不同的方法可以解决问题。如果要注入样式表，可以使用以下代码：

var ua='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A';
var verRe = /Version\/(\d+)/;
var version = ua.match(verRe);
var safari = ua.indexOf("Safari");

if (safari !== -1) {
    if (version[1] <= 8) {
        addStyleTag("safari8.css");
    }
}

function addStyleTag(url) {
    var link,head;
    head = document.querySelector("head");
    link = document.createElement("link");
    link.setAttribute("href",url);
    link.setAttribute("type","text/css");
    link.setAttribute("rel","stylesheet");
    head.appendChild(link);
}

如果是我的页面，我会编写代码以在Safari上优雅地降级。

CSS目标仅限Safari 8

2 个答案: