为什么css“全部:未设置"?在MacOS的Safari浏览器中运行异常? [英] Why css "all: unset" works weirdly in Safari browser for MacOS?
问题描述
所以基本上我是这种情况,父母有css all:unset
.
So basically I made this situation, the parent has the css all: unset
.
然后我注意到当我使用Safari(版本 12.1.1(14607.2.6.1.1)
)时,其所有颜色的子级只能受 *
块影响,甚至不是内联或!important
.
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
.
但是只有 color
会表现这种方式,因为您可以看到 background-color
使用的是它自己的属性.
But only color
behaves that way, as you can see the background-color
is using it's own property.
但是它在Chrome浏览器中工作正常,是在野生动物园中出现故障还是我做错了什么?以及如何在Safari中修复它?
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>
-
预期结果(Chrome)
Expected result(Chrome)
错误的结果(Safari 版本12.1.1(14607.2.6.1.1)
)
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 对此错误进行了评论:
https://bugs.webkit.org/show_bug.cgi?id=158782
@ Dan Fabulich commented the bug for this below:
https://bugs.webkit.org/show_bug.cgi?id=158782
这篇关于为什么css“全部:未设置"?在MacOS的Safari浏览器中运行异常?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!