无法在Safari中设置“全部：未设置”按钮的文本颜色

Question

在macOS 10.15的Safari 13.1中使用all: unset时，我无法设置此按钮的文本颜色。在Chrome 80和Firefox 74上似乎可以正常工作。

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

<button>button</button>

所需：“按钮”一词在深蓝色背景上应显示为白色。

实际：在Safari中（仅？！），“按钮”一词在深蓝色背景上显示为黑色，难以辨认。

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

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年开始营业。

之所以发生这种情况，是因为“全部：未设置”将-webkit-text-fill-color设置为黑色，并且覆盖了颜色。

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

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

<button>button</button>