I just spent too much time figuring out why my <button> doesn't want to display white text color on iOS Safari. It's a button to close modal, defined like this:
<button type="button">✖</button>
这是我得到的：
I was sure I'm missing something about, as we all know that buttons are not the easiest to style. But after applying color: #fff; and -webkit-appearance: none I expected it to work. I finally thought of trying other characters and, for my surprise, here's the result:
显然我的CSS是正确的，应该归咎于角色本身。现在，我真的很好奇发生了什么。起初我以为我选择的十字架可能是表情符号，但似乎并非如此。第一个只是常规大写字母X（1个字节），所有其他均为3个字节。表情符号是4个字节，对不对？
我的问题主要是出于好奇，我的问题是：为什么这个十字架保持灰色？
For reference, here's the crosses I tested: X ✕ ☓ ✖ ✗ ✘, the fourth one being the one. The font I used is Tahoma, but I'm not sure if that matters for Unicode characters after all. The problematic cross sign is called HEAVY MULTIPLICATION X (U+2716).
不幸的是，表情符号的工作方式不同。其中一些是文字符号，而另一些只是简单的表情符号。我做了这个简单的把戏，并且在大多数情况下都有效：
Mystery solved. This particular cross character has its very close emoji brother. The cross itself is
U+2716, which is decimal10006.但是，还有表情符号，除了灰色（至少在苹果公司的解释中）和带有淡淡的阴影外，看起来几乎完全相同。这个表情符号实际上有两个组合字符：
U+2716crossVARIATION SELECTOR-16, beingU+FE0For decimal65039It looks like Safari on iOS converts
U+2716to its emoji counterpart under some circumstances. One of those cases is putting it inside the<button>.