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更改其颜色.(事实上​​,不能保证复选标记甚至是黑色的.其他平台会以各种不同的颜色绘制它!)

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

在HTML中,您可以通过︎直接跟随您的复选标记来添加角色.

div {
  color: red;
}

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

Answer 2

如果您尝试使用CSS-after设置元素样式,则可以使用此方法确保图标在iOS中变为绿色.只有"✔",iOS不会改变图标的​​颜色.

.myElement:after {
  color:green;
  content: "?\fe0e";
}