iOS 9删除了使用CSS更改某些符号颜色的可能性 [英] iOS 9 removed the possibility to change certain symbol colors using CSS

问题描述

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

div {
color：＃ff0000;
-webkit-appearance：none;
}

在HTML中，您可以通过添加&＃xfe0e; 直接跟着你的复选标记。

$ b

div {color：red;}

< div> ✔无变化选择器< br> ✔&安培;＃xfe0e;变体选择器< / div>

We've been using various symbols such as checkmarks (✔) on our website and just noticed that with the release of iOS 9, Safari and other browsers have been updated to not respect the color attribute. The same behaviour can be found in both Safari and Chrome on iOS 9.

<div>test ✔</div>

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

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

The above example displays fine on other platforms (e.g. OS X). Is there a known workaround to get this to work on iOS 9?

Edit: It appears that this only applies to certain variants of check marks (and other variants of symbols). In this case we were using the heavy check mark (U+2714). When switching to the regular check mark (U+2713) iOS did not apply any formatting to it and we were able to apply a custom color to it.

解决方案

In iOS 9, U+2714 HEAVY CHECK MARK is included in Apple's set of emoji characters. Just like the other emojis, it's drawn as a full-color bitmap instead of a single-color vector glyph, so you can't change its color with CSS. (In fact, there's no guarantee that the check mark will even be black. Other platforms draw it in a variety of different colors!)

To get iOS to draw the check mark as regular text that you can recolor, you need to use a U+FE0E VARIATION SELECTOR-15 character. If you put that variation selector character right after a ✔, iOS will use the regular text version (✔︎) instead of the emoji version (✔). OS X doesn't have an emoji variant, so these look the same, but on iOS the variants look slightly different:

In HTML, you can add the character by putting a ︎ directly following your check marks.

div {
  color: red;
}

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

这篇关于iOS 9删除了使用CSS更改某些符号颜色的可能性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！