无法在 Safari 中设置 "all: unset" 按钮的文本颜色

Question

在 macOS 10.15 上的 Safari 13.1 中使用 all: unset 时，我无法设置此按钮的文本颜色。它似乎在 Chrome 80 和 Firefox 74 上运行良好。

button {
  all: unset;
  color: white;
  background-color: darkblue;
}

<button>button</button>

期望：单词 "button" 应该在深蓝色背景上以白色显示。

实际：在 Safari 中（仅？！）单词 "button" 在深蓝色背景上显示为黑色，难以辨认。

这里出了什么问题？这是我的错吗？有解决方法吗？

Answer 1

有意思。 all: unset 将所有值重置为其继承值。

如果您需要解决方法，只需将其包装在一个带有白色文本的元素中即可。下面的代码片段并不理想，但它应该适用于 Safari。

button {
  all: unset;
  background-color: darkblue;
}

.button-wrapper {
  color: white;
}

<div class="button-wrapper">
  <button>button</button>
</div>

Answer 2

这是 Safari 中的一个已知错误。 https://bugs.webkit.org/show_bug.cgi?id=158782 从 2016 年开始营业。

This is happening because the "all: unset" is setting -webkit-text-fill-color to black, and that overrides color.

您可以通过将 -webkit-text-fill-color 设置为所需的颜色来解决这个问题。希望他们有一天会修复这个错误！

button {
  all: unset;
  color: white;
  -webkit-text-fill-color: white;
  background-color: darkblue;
}

<button>button</button>

Can't set text color of "all: unset" button in Safari