CSS all 属性在 iOS 上意外工作答案

【问题标题】：The CSS all property working unexpectedly on iOSCSS all 属性在 iOS 上意外工作
【发布时间】：2018-05-20 08:12:25
【问题描述】：

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

当一个元素具有all:inherit（或all: unset）时，iOS 不惜一切代价将该元素的颜色锁定为其继承（或初始）值 - 违反级联规则。

鉴于以下非常简单的标记

<div>Hi there</div>

使用 CSS：

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

片段演示：（用 iPhone/iPad 等 iOS 设备打开查看问题）

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

}

&lt;div&gt;Hi there&lt;/div&gt;

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

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

片段演示：

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

&lt;div&gt;Hi there &lt;span&gt;&lt;strong class="inner"&gt;inner element&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;

...所以在上面的 sn-p iOS 中将内部元素涂成红色！

注意：caniuse 表示 iOS Safari 从 9.3 版开始支持 CSS all 属性，并且不报告任何已知问题。

...所以：iOS 中有解决方法吗？

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

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

【问题讨论】：

标签： css safari

【解决方案1】：

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

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

【讨论】：