为什么这个十字标志在 Safari iOS 中保持灰色？答案

【问题标题】：Why does this cross sign stay gray in Safari iOS?为什么这个十字标志在 Safari iOS 中保持灰色？
【发布时间】：2020-04-08 20:07:51
【问题描述】：

我只是花了太多时间弄清楚为什么我的<button> 不想在 iOS Safari 上显示白色文本颜色。是一个关闭modal的按钮，定义如下：

<button type="button">✖</button>

这是我得到的：

我确信我错过了一些东西，因为我们都知道按钮不是最容易设计的。但是在应用color: #fff; 和-webkit-appearance: none 之后，我希望它可以工作。我终于想到尝试其他角色，令我惊讶的是，结果如下：

显然我的 CSS 是正确的，应该归咎于角色本身。现在，我真的很好奇发生了什么事。起初我以为我选择的那个十字架可能是表情符号，但似乎不是。第一个只是一个普通的大写 X（1 个字节），所有其他都是 3 个字节。表情符号是 4 个字节，对吧？

出于好奇，我的问题是：为什么这个十字架一直是灰色的？

作为参考，这是我测试的十字架：X ✕ ☓ ✖ ✗ ✘，第四个就是第一个。我使用的字体是 Tahoma，但我不确定这对于 Unicode 字符是否重要。有问题的十字符号称为 HEAVY MULTIPLICATION X (U+2716)。

【问题讨论】：

【解决方案1】：

很遗憾，表情符号的工作方式不同。其中一些是文本符号，其中一些只是简单的表情符号。我做了这个简单的技巧，而且大部分时间都有效：

element {
  color: transparent;  
  text-shadow: 0 0 0 green;
}

【讨论】：

这个字符似乎不是表情符号。
另外值得注意的是，当不在<button> 中时它确实可以正常工作。超级奇怪，也许只是 Safari 的错误？
这是一个表情符号，被 Apple 称为 Multiplication Symbol。来源：https://emojipedia.org/multiply/。我不认为这是一个错误。只需使用我分享的技巧进行测试即可。我认为它会工作
很好的发现，虽然它似乎是另一个角色。我将它复制粘贴到 MySQL 查询以检查字节长度，它是 6。
我不确定这是如何深入工作的，也许一些研究可以得出答案，但我猜 Safari 或 Chrome 或任何其他平台都可以覆盖表情符号。

【解决方案2】：

谜团解开了。这个特殊的十字架角色有它非常亲密的表情符号兄弟。十字本身是U+2716，即十进制10006。

但也有表情符号，看起来几乎一模一样，除了灰色（至少在 Apple 的解释中）和轻微的阴影。此表情符号由两个组合字符组成：

在某些情况下，iOS 上的 Safari 似乎会将 U+2716 转换为对应的表情符号。其中一种情况是将其放入<button>。

【讨论】：