为啥 css "all: unset" 在 MacOS 的 Safari 浏览器中工作异常？

Posted 2023-02-24

【中文标题】为啥 css "all: unset" 在 MacOS 的 Safari 浏览器中工作异常？

【英文标题】：Why css "all: unset" works weirdly in Safari browser for MacOS?为什么 css "all: unset" 在 MacOS 的 Safari 浏览器中工作异常？

【发布时间】：2019-10-08 11:10:18

【问题描述】：

所以基本上我做了这个情况，父级有cssall: unset。

然后我注意到，当我使用 Safari（版本 12.1.1 (14607.2.6.1.1)）时，它的所有子代颜色只能受 * 块的影响，甚至不能被内联或 !important 影响。

但只有 color 会这样，你可以看到 background-color 正在使用它自己的属性。

但它在 Chrome 中运行良好，是 safari 中的故障还是我做错了什么？我该如何在 Safari 中修复它？

* 
  color: red;                   /* Text color is using this one */
  background-color: pink;


.Parent 
  all: unset;


.Child 
  color: blue;
  background-color: yellow;     /* Background color is using this one */

<div class="Parent">
  <div class="Child">Some Text</div>
</div>

预期结果（Chrome）

错误结果（Safari Version 12.1.1 (14607.2.6.1.1)）

【参考方案1】：

Safari 使用特殊属性-webkit-text-fill-color。如果你使用它，颜色会起作用：

* 
  color: red;                   /* Text color is using this one */
  background-color: pink;
  -webkit-text-fill-color: red;


.Parent 
  all: unset;


.Child 
  color: blue;
  background-color: yellow;     /* Background color is using this one */
  -webkit-text-fill-color: blue;

<div class="Parent">
  <div class="Child">Some Text</div>
</div>

@ Dan Fabulich 在下面评论了这个错误：https://bugs.webkit.org/show_bug.cgi?id=158782

【讨论】：

哇，我不知道有这样的属性，我以为color 是用于着色文本，非常感谢！

但是color 属性不起作用仍然没有意义：/

没问题！ color 通常用于为文本着色，但 Safari 是少数也有 -webkit-text-fill-color 覆盖它的浏览器之一。除非您知道，否则会导致很多问题。

这是 Safari 上的一个已归档错误。 bugs.webkit.org/show_bug.cgi?id=158782

@DanFabulich 谢谢。我将其添加到答案中