css - CSS all 属性在 iOS 上意外工作

Question

意外行为特别适用于 color 属性:(AFAIK)

看起来当一个元素有all:inherit(或all: unset)时，iOS 锁定该元素的颜色是继承的(或初始)值(value)不惜一切代价 - 违反级联规则。

给定以下非常简单的标记

<div>Hi there</div>

使用 CSS:

body {
  color: red;
  border: 5px solid red;
}
div {
  all: inherit;
  color: green; 
  border: 5px solid green;
}

Snippet demo:(用iPhone/iPad等iOS设备打开查看问题)

body {
  color: red;
  border: 5px solid red;
}
div {
  all: inherit;
  color: green;
  border: 5px solid green; 

}

<div>Hi there</div>

...我希望 div 的文本和边框的结果颜色为绿色(这实际上是 Chrome 和 firefox 上的结果)但是在 iOS(10.3 +)* 结果边框颜色为绿色，但文本颜色为红色!

一个更奇怪的 iOS 问题是，当一个元素具有 all:inherit(或未设置)时，似乎无法更改 descendant 元素的颜色!

片段演示:

body {
  color: red;
}
div {
  all: inherit;
}
.inner {
  color: green;
}

<div>Hi there <span><strong class="inner">inner element</strong></span></div>

...所以在上面的代码片段中，iOS 将内部元素着色为红色!

备注:caniuse表示 iOS safari 从 9.3 版开始支持 CSS all 属性，并且没有报告任何已知问题。

...那么:在 iOS 中是否有解决此问题的方法？

目前，由于这个问题，我看不到任何使用 all 属性的方法!

---

我测试了三款 iOS 设备:运行 iOS 10.3 的 iphone 6s、运行 iOS 11 的 iphone 7 和运行 iOS 11.1 的 iPad

Answer 1

根据这个答案 Why css "all: unset" works weirdly in Safari browser for MacOS?

Safari 似乎用 webkit-text-fill-color 覆盖了所有颜色属性。

所以使用 webkit-text-fill-color 自己来修复颜色是解决方法:)