Safari 移动版不尊重 HTML 实体的 CSS 颜色属性 ✖答案

【问题标题】：Safari mobile does not respect CSS color attribute for HTML entity ✖Safari 移动版不尊重 HTML 实体的 CSS 颜色属性 ✖
【发布时间】：2026-01-14 08:35:01
【问题描述】：

有点令人困惑，颜色属性在桌面版 Safari 上得到尊重，但在移动版上却没有。

我在 iPhone 5（iOS 版本 9.2.1）上对其进行了测试。

示例代码（第一个跨度在 safari mobile 上将显示为黑色）：

 <html>
   <head>
      <style>
         span { color: white; }
      </style>
   </head>
   <body>
      <span>&#10006;</span>
      <span>&times;</span>
      <span>×</span>
   </body>
 </html>

和 JSFiddle 链接：https://jsfiddle.net/9t3v8846/

添加 !important 没有做任何事情。有什么想法可能导致这种情况吗？

【问题讨论】：

你试过用#FFFFFF代替white吗？
刚刚试了，结果还是一样。

标签： html css mobile safari

【解决方案1】：

如果有穷人遇到这个..解决这个问题的方法是在实体之后添加一个变体选择器，如下所示：

<span>&#10006;&#xFE0E;</span>

本质上，在幕后发生的事情是浏览器决定如何呈现 HTML 实体。

iOS 上的 Safari 更喜欢尽可能使用类似 Emoji 的渲染，因此它会忽略 CSS 属性。上面使用的变体选择器指定我们要使用类似文本的渲染，导致 Safari 现在尊重应用到它的任何颜色属性。

【讨论】：

完美运行！非常感谢！这颗坚果让我一阵头疼。
不错。我们可以对 CSS 中的转义字符执行此操作吗？我尝试在转义字符后使用 \fe0e，但没有任何乐趣。在 iPad 上测试。
在某些 Outlook 版本中，︎显示为可见字符，即非打印矩形。使用可见性：无在 Outlook 中无效。使用显示：无；导致移动 Safari 看不到实体，因此不应用颜色声明。简而言之——这似乎不是 HTML 电子邮件的可用解决方案。
这可能与 Outlook 的渲染引擎有关。您是否尝试过不同的显示方式？以下是我必须使用它来让它在 ::after 内容中工作。它对我来说是双重转义的，所以也许：\\2716\\fe0e 或 \2716\\fe0e 可以解决问题？
谢谢！但是——你是怎么想出来的？

【解决方案2】：

如果你少用试试这个

@baseColor: #ffffff;

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    color:@baseColor
}

【讨论】：

恐怕也没有运气。
这个问题与浏览器特定的渲染有关。
试着测试你的例子。 LESS 最终被翻译成 CSS。您的 LESS sn-p 最终将得到与所提供的完全相同的 CSS 代码。实际上，您的回答是：尝试使用示例中提供的相同 CSS 规则，如果您将其从 LESS 中翻译出来，而不是仅仅将其放入样式标签中，那么应该会发生一些神奇的事情！