css - currentColor 似乎在 Safari 中得到 "stuck"

Question

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

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

Safari 8.0.4 在 Yosemite 10.10.2 上的不正确行为(在 iOS 8.2 上也是如此)——注意所有三个三 Angular 形都是红色的，而不是它们元素的当前颜色:

这是 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 规范的解释问题？

更重要的是，有什么解决这个问题的建议吗？我不想在单独的 :after 规则中为每个元素显式声明颜色。 (使用 currentColor 确实简化了我们其他 CSS 更改时的维护。)

Answer 1

所以，结果是 actual Safari bug (可能很快就会修复)。

我能够使用 this suggestion 解决它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 中消失了(在其他浏览器中仍然有效)。