为什么CSS“ all：unset”在MacOS的Safari浏览器中会怪异地工作？

Question

所以基本上我是这种情况，父母有css all: unset。

然后我注意到，当我使用Safari（版本12.1.1 (14607.2.6.1.1)）时，其所有颜色的子项只能通过*块来实现，甚至不能内联或!important来实现。

但是只有color会那样做，因为您可以看到background-color正在使用它自己的属性。

但是它在Chrome中工作正常，是在野生动物园中出现故障还是我做错了什么？以及如何在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)）

Answer 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>