仅适用于Safari 8的CSS

Question

当我在网络上进行一些优化时，我在使用Safari时遇到了一些麻烦。

我有一些CSS命令，这些命令在Safari 8（可能不受支持？），Safari 9和所有其他浏览器上都损坏。

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

所以：这是一种定位方式！ 野生动物园版本8？

定位可以是任何-

作为html中的注释，例如“ if IE7”的旧注释
就像在CSS中一样（但是-webkit不仅针对Safari，而且针对所有webkit浏览器）
如javascript / jquery

那么，有什么建议吗？

Answer 1

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

浏览器检测本身可以在服务器或客户端进行。 虽然服务器端可能更可取，但我假设您打算在客户端进行。 为此，您可以使用一个库（可以通过快速的Google搜索找到多个库，但由于只查找一种特定情况，可能会显得过大）或编写自己的脚本来检查用户代理。

这是一个有用的资源，应该可以帮助您入门： 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上正常降级。

仅适用于Safari 8的CSS

问题描述

2 个解决方案

解决方案1
0 2016-01-22 01:31:01

解决方案2
0 已采纳 2016-01-22 01:35:44

仅适用于Safari 8的CSS

问题描述

2 个解决方案

解决方案1 0 2016-01-22 01:31:01

解决方案2 0 已采纳 2016-01-22 01:35:44

解决方案1
0 2016-01-22 01:31:01

解决方案2
0 已采纳 2016-01-22 01:35:44