CSS所有属性在iOS上意外工作

意外行为专门适用于 color属性：（ afaik）

看起来，当元素具有 all:inherit（或 all: unset）ios 时，该元素的颜色不惜一切代价与级联规则相对的继承（或Intial）值。

给定以下非常简单的标记

<div>Hi there</div>

与CSS：

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

摘要演示：（使用iOS设备（例如iPhone/iPad）打开，查看问题）

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 element！

的颜色

摘要演示：

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，iPhone 7运行iOS 11和运行iOS 11.1

的iPad

根据此答案为什么CSS"全部：Unset"在Safari浏览器中为MacOS工作很奇怪？

似乎Safari用WebKit-Text-Fill色覆盖所有颜色属性。

因此，请自己使用webkit-text-fill-color修复颜色：）

相关内容