currentColor似乎得到了＆＃34;卡住＆＃34;在Safari中

Question

我正在尝试使用CSS currentColor作为边框颜色来生成CSS三角形，使用：after content。这在我尝试的所有浏览器中都很有效，除了一个：Safari似乎从它生成的第一个三角形缓存currentColor，然后在任何地方使用它。

以下是我所看到的 - 来自Chrome（以及Firefox和IE9 +）的预期行为：

Yosemite 10.10.2上的Safari 8.0.4行为不正确（iOS 8.2上相同） - 请注意所有三个三角形都是红色，而不是其元素的currentColor：

这是a fiddle with the full code证明问题的原因。 相关的CSS：

span {
    display: inline-block;
    border-bottom: 2px solid currentColor;
}

span::after {
    /* Generate a triangle (based on Foundation's css-triangle mixin) */
    content:"";
    display: inline-block;
    width: 0;
    height: 0;
    border: inset 0.4em;
    /* Safari seems to cache this currentColor... */
    border-color: currentColor transparent transparent transparent;
    border-top-style: solid;
}

.red { color: #c00; }
.blue { color: #009; }

HTML很简单：

<div>
    <span class="red">Red</span>
    <span>Default</span>
    <span class="blue">Blue</span>
</div>

这是Safari中的错误吗？关于CSS规范的解释问题？

更重要的是，有什么建议可以解决这个问题吗？我不想在单独的显式声明颜色：每个元素的规则之后。 （使用currentColor确实简化了维护，因为我们的其他CSS更改。）

Answer 1

所以，结果证明是actual Safari bug（很快就会修复）。

我能够使用边框颜色默认为currentColor的this suggestion来解决它。替换这个：

    border-color: currentColor transparent transparent transparent;

具有扩展属性，避免提及currentColor：

    /* border-top-color: currentColor; is the default behavior */
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;

并且问题在Safari中消失了（它仍可在其他浏览器中使用）。

Answer 2

即使我遇到了类似的问题，所以我必须选择一个小的 js技巧。

通过这个技巧，我们可以使用currentColor属性在所需的元素中正确设置。但它可以实现仅适用于普通元素。所以我将伪元素移动到普通元素中。

  

您必须强制safari重绘元素才能实现此目的。要实现重绘元素，只需隐藏并显示它即可。

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]);
        }
    }
}

检查此simple codepen （您的代码稍加修改）

以及read this for brief info

通过这个技巧无法实现伪元素。您必须将其移动到跨度或其他元素中。