为什么css“all:unset”在MacOS的Safari浏览器中奇怪地工作?

Hao*_* Wu 5 html css safari unset

所以基本上我做了这种情况,父母有 css all: unset

然后我注意到当我使用 Safari(Version 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 */
}
Run Code Online (Sandbox Code Playgroud)
<div class="Parent">
  <div class="Child">Some Text</div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 预期结果(铬) 在此处输入图片说明

  • 错误的结果(Safari Version 12.1.1 (14607.2.6.1.1)在此处输入图片说明

Ano*_*ous 5

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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="Parent">
  <div class="Child">Some Text</div>
</div>
Run Code Online (Sandbox Code Playgroud)

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