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

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>

这是我得到的:

Button with gray cross, yikes!

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:

Button with some wild crosses

显然我的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).

评论
  • 小偏执i
    小偏执i 回复

    不幸的是,表情符号的工作方式不同。其中一些是文字符号,而另一些只是简单的表情符号。我做了这个简单的把戏,并且在大多数情况下都有效:

    element {
      color: transparent;  
      text-shadow: 0 0 0 green;
    }
    
  • 终淡化了美
    终淡化了美 回复

    Mystery solved. This particular cross character has its very close emoji brother. The cross itself is U+2716, which is decimal 10006.

    但是,还有表情符号,除了灰色(至少在苹果公司的解释中)和带有淡淡的阴影外,看起来几乎完全相同。这个表情符号实际上有两个组合字符:

    1. The same U+2716 cross
    2. A character called VARIATION SELECTOR-16, being U+FE0F or decimal 65039

    It looks like Safari on iOS converts U+2716 to its emoji counterpart under some circumstances. One of those cases is putting it inside the <button>.