currentColor似乎在Safari中被"卡住"了

Question

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

以下是我所看到的 - Chrome(以及Firefox和IE9 +)的预期行为:

来自Yosemite 10.10.2上的Safari 8.0.4的不正确行为(在iOS 8.2上相同) - 请注意所有三个三角形都是红色,而不是其元素的currentColor:

这是演示问题的完整代码的小提琴.相关的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

所以,事实证明这是一个真正的Safari bug(很快就会修复).

我能够使用border-color默认为currentColor的这个建议来解决它.替换这个:

    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中消失了(它仍然适用于其他浏览器).