iOS和Safari中CSS`currentColor`关键字的问题 TL；博士 这里有一个（谢谢@NicoO）：在Safari中，最初的“红色”应用于currentColor的所有其他实例 如何使用CSS解决currentColor的继承问题 或者，我该如何检测对CSS颜色关键字的支持 我还需要检测部分支持。例如，Apple Webkit在大多数情况下使用不稳定 全部故事

我在一个项目中使用CSS颜色关键字。我可以补充说，大量使用它。例如：

我在浮动在完整视口旋转木马上的站点标题组件上使用它

每张幻灯片都有不同的背景色和对比色。 当幻灯片更改时，它会更新站点标题以告知新的对比度。 站点标题的

颜色

将相应地交换，任何带有

的内容都将继承

或者更新

currentColor

关键字，例如

的

填充

、一些

边框颜色

s和一些

背景颜色

s

另一个更简单的例子：

我有各种各样的调色板，我把它们用作类名 （例如，

bg--emerald

或

bg--blue

）放在盒子上。 这些框的内容可以是链接或按钮，也可以只是文本。 例如，将

currentColor

应用于按钮边框， CSS变得非常简单，因为我只需要设置

color

每个配色方案的属性。 无需更新每个受影响的子节点

这一切都很顺利

在Firefox、Chrome、Opera、InternetExplorer9+及其“移动”等价物下的支持非常出色。不幸的是，Apple Webkit（iOS Safari和OSX Safari）的支持很差且不稳定。它不适用于任何地方，也不适用于所有时间，即使是在最简单的示例中，也不适用于在需要时重新绘制或保持一致

我做了一些搜索，并没有发现很多人使用这个实用的CSS关键字，因此没有现有的方法来检测它或填充它。我不知道该如何对这个特性进行Modernizer测试。特别是检测部分支持，比如我需要Apple Webkit

我现在可能只是想通过浏览器检测它，直到我能想出一个解决方案，或者偶然发现一个聪明的人能比我更快地想出一个解决方案

JSFIDLE 我已经修改了提琴（上面链接的），以大致复制我遇到的问题。我注意到的是，它就像

currentColor

被最初继承的值（“红色”）锁定，并在应用于其他所有内容时携带它。例如，如果将

：第n个子项（1）

的

颜色

切换到其他项，则新值将使用

currentColor

应用于以下所有元素

浏览器 破碎的

• OSX，Safari 6-7
• iOS 6-7，Safari

作品

• Windows，Safari 5
• iOS 5，Safari

---

Safari 6和更高版本中的某个东西坏了。因为这是一个被低估的特性，所以没有人注意到。

它似乎可以完全按照它应该的方式运行

如果在{color}属性本身上设置了{currentColor}关键字，则将其视为{color:inherit}

在小提琴中，您在第一个div标记上附加了一种颜色

div:nth-child(1){
color: red;
} 

然后，当您试图用{currentColor}添加一个{border}和{box shadow}（如下所示）时，您似乎将关键字{currentColor}附加到了所有分割元素上，但是，{border}和{box shadow}已经在{div:nth child（1）}中分配了一个颜色，并且很可能启动了默认模式{color:inherit}用于分区的所有属性，并在内容块的结构中创建了更改

div {
margin: 1em;
border: 1px solid currentColor;
box-shadow: 2px 2px 1px currentColor;
padding: 10px;
} 

---

我建议在第一个和第二个元素中首次使用color之后，不要将关键字{currentColor}与division标记一起使用，看看它是如何为您工作的。另外，在创建函数时添加颜色后，{border}和{box shadow}颜色不需要更新，因此我不明白在这种情况下为什么需要使用关键字来实现目标。检查下面的小提琴，看看它是否能解决您的问题。通过一些小的改变，所有的分区都继承了随机函数设置的个性化颜色，并在设置的间隔内改变！我认为对这个关键字的使用进行一些调整将消除对有限支持检测的需要

这是我最近面临的问题之一。默认情况下，边框颜色继承与字体相同的颜色，因此解决方案根本不使用currentColor。尝试分解边界属性。例如

border : 1px solid currentColor 

到

我给你做了一把小小提琴

---

如果您是通过js进行设置，那么您可以进行简单的破解

您需要强制safari重新绘制dom元素。您可以简单地隐藏所有元素（父元素和子元素）并显示它们。这将使孩子们能够设置预期的颜色

var nodeStack =[element];
while (node = nodeStack.pop()) {
    if (node.nodeType == 1) {
        node.style.display="none";
        node.style.display="";
        var i = node.childNodes.length;
        while (i--) {
            nodeStack.push(node.childNodes[i]);
        }
    }
}

这将强制safari重新绘制div，以便将颜色正确设置为currentColor

但这不会反映在psuedo元素中，例如：after

---

我以前没有使用过此功能，但它相当有趣。这是小提琴。您是否只有在使用Javascript更改颜色时才会遇到问题，或者页面重新加载时的行为是否也不一致？更新：这个提琴适用于我当前在iOS上的safari。@NicoO我已经更新了提琴来说明一些问题，这也让我确切地意识到了什么是窃听，尽管我仍然不明白为什么：请注意，边框和框阴影已经默认为

currentColor

，但是，看起来他们刚刚在Webkit代码库中修复了你10个月大的孩子的问题——所以感谢@Chauncey向他们报告，还有

var nodeStack =[element];
while (node = nodeStack.pop()) {
    if (node.nodeType == 1) {
        node.style.display="none";
        node.style.display="";
        var i = node.childNodes.length;
        while (i--) {
            nodeStack.push(node.childNodes[i]);
        }
    }
}