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

我们已经在我们的网站上使用了诸如勾号(✔)等各种符号,并注意到随着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上工作？

编辑：这似乎只适用于某些标记(和符号的其他变体)的变体.在这种情况下,我们使用了很大的复选标记(U2714).当切换到常规复选标记(U2713)时,iOS没有应用任何格式,我们可以应用自定义颜色.

解决方法

在iOS 9中,U 2714 HEAVY CHECK MARK被包含在Apple的一些表情符号中.就像其他emojis一样,它被绘制为全色位图,而不是单色矢量字形,因此您无法使用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>