我们一直在我们的网站上使用复选标记 (✔) 等各种符号,并且刚刚注意到随着 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 不会对其应用任何格式,我们可以对其应用自定义颜色。
最佳答案
在 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>
✔︎ with variation selector
</div>
关于html - iOS 9 移除了使用 CSS 更改某些符号颜色的可能性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32639694/