为什么 css "all: unset"在 MacOS 的 Safari 浏览器中奇怪地工作? [英] Why css "all: unset" works weirdly in Safari browser for MacOS?

问题描述

所以基本上我做了这种情况，父级有css all: unset.

然后我注意到当我使用 Safari(Version 12.1.1 (14607.2.6.1.1)) 时，它的所有子项颜色只能受到 * 块的影响，甚至不是内联或 !important.

但是只有 color 是这样的，正如你所看到的 background-color 正在使用它自己的属性.

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

* {红色;/* 文本颜色正在使用这个 */背景颜色:粉红色；}.父{全部:未设置；}.孩子 {颜色:蓝色；背景颜色:黄色；/* 背景颜色正在使用这个 */}

<div class="Child">一些文字</div>

• 预期结果(Chrome)

• 错误的结果(Safari Version 12.1.1 (14607.2.6.1.1))

解决方案

Safari 使用特殊属性 -webkit-text-fill-color.如果您使用它，则颜色有效:

* {红色;/* 文本颜色正在使用这个 */背景颜色:粉红色；-webkit-text-fill-color: 红色；}.父{全部:未设置；}.孩子 {颜色:蓝色；背景颜色:黄色；/* 背景颜色正在使用这个 */-webkit-text-fill-color: 蓝色；}

<div class="Child">一些文字</div>

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

So basically I made this situation, the parent has the css all: unset.

Then I notice when I use Safari(Version 12.1.1 (14607.2.6.1.1)) all the children of it color only can be effected by * block, not even inline or !important.

But only color behaves that way, as you can see the background-color is using it's own property.

But it works fine in Chrome, is it a glitch in safari or I did something wrong? And how can I fix it in 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>

• Expected result(Chrome)

• Wrong result(Safari Version 12.1.1 (14607.2.6.1.1))

解决方案

Safari uses the special property -webkit-text-fill-color. If you use that, the color works:

* {
  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 commented the bug for this below:
https://bugs.webkit.org/show_bug.cgi?id=158782

这篇关于为什么 css "all: unset"在 MacOS 的 Safari 浏览器中奇怪地工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！