html - iOS 9 移除了使用 CSS 更改某些符号颜色的可能性

Question

我们一直在我们的网站上使用复选标记 (✔) 等各种符号，并且刚刚注意到随着 iOS 9 的发布，Safari 和其他浏览器已更新为不尊重颜色属性。在 iOS 9 上的 Safari 和 Chrome 中都可以找到相同的行为。

<div>test ✔</div>

div  {
   color: #ff0000;
   -webkit-appearance: none;
}

https://jsfiddle.net/afb14b2k/1/

以上示例在其他平台(例如 OS X)上显示良好。是否有已知的解决方法可以让它在 iOS 9 上运行？

编辑:这似乎只适用于复选标记的某些变体(以及其他符号变体)。在本例中，我们使用了粗勾号 (U+2714)。当切换到常规复选标记 (U+2713) 时，iOS 不会对其应用任何格式，我们可以对其应用自定义颜色。

Answer 1

在 iOS 9 中，U+2714 HEAVY CHECK MARK 包含在 Apple 的表情符号字符集中。就像其他表情符号一样，它被绘制为全色位图而不是单色矢量字形，因此您无法使用 CSS 更改其颜色。 (事实上​​ ，甚至无法保证复选标记是黑色的。Other platforms 用各种不同的颜色绘制它!)

要让 iOS 将复选标记绘制为可以重新着色的常规文本，您需要使用 U+FE0E VARIATION SELECTOR-15 字符。如果您将变体选择器字符放在 ✔ 之后，iOS 将使用常规文本版本 (✔︎) 而不是表情符号版本 (✔)。 OS X 没有表情符号变体，所以它们看起来一样，但在 iOS 上变体看起来略有不同:

在 HTML 中，您可以通过将 ︎ 直接放在复选标记之后来添加字符。

div {
  color: red;
}

<div>
  ✔ without variation selector<br>
  ✔&#xfe0e; with variation selector
</div>