火狐浏览器跨度样式错误的颜色(红色).上面怎么了?

Firefox Browser (Mozilla Firefox for Ubuntu canonical=1.0( 76.0.1(64位(，这个简单的代码给出了错误的结果：

预期：两个元素均为蓝色

实际上：红色 #x1F6D1，蓝色的"蓝色">

法典：

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>This is blue:<span style="color:blue;">&#x1F6D1</span> and this is blue <span style="color:blue;">BLUE</span>.</p>
</body>
</html>

谷歌浏览器和Chromium网络浏览器的行为符合预期，它不是表情符号。知道这里出了什么问题吗？呵呵，呵呵。

这不是因为浏览器。这是因为一些 unicode 字符有自己的风格。您需要使用选项而不是color属性来更改它们的颜色。

您可以浏览以下链接以获取一些解决方案：

堆栈溢出：更改未确定字符颜色

统一码表情符号的颜色

一种解决方案是text-shadow属性：

color: transparent; /* needed to disable default color */
text-shadow: 0 0 0 blue;

例：

.blue-emoji {
color: transparent;
text-shadow: 0 0 0 blue;
}

<h1>The span element</h1>
<p>This is blue:<span class="blue-emoji">&#x1F6D1</span> and this is blue <span style="color:blue;">BLUE</span>.</p>

相关内容

最新更新

热门标签：