微软Edge浏览器无法对Unicode符号应用CSS color样式求助

这确实是旧版Edge（基于EdgeHTML内核）的一个渲染兼容性问题，不是你的代码写法错误——先放轻松！其他主流浏览器（Chrome、Firefox、IE11等）都能正确识别<span>的color样式，但旧版Edge对部分Unicode符号（比如方块◼这类图形化符号）的样式处理有特殊逻辑，会忽略文本颜色样式， fallback到系统默认的黑色。

几种可行的解决方案 #

以下方法都能解决这个问题，按可靠性排序：

1. 用SVG替代Unicode符号（最推荐）
   SVG可以完全控制图形样式，所有浏览器都能一致渲染，没有兼容性问题。示例代码：

   <svg width="16" height="16" viewBox="0 0 16 16">
     <rect width="16" height="16" fill="blue" />
   </svg>
   

   你可以根据需要调整width/height和fill颜色，效果和Unicode方块完全一致，且样式不会被浏览器忽略。

2. 使用CSS text-shadow hack
   这是一个针对旧版Edge的小技巧，利用text-shadow来模拟文本颜色：

   <span style="text-shadow: 0 0 0 blue;" title="square">◼</span>
   

   原理是让阴影和文本完全重叠，Edge会识别阴影的颜色，而其他浏览器也能正常显示蓝色。

3. 将符号放到CSS伪元素中
   把Unicode符号移到::before或::after伪元素里，再设置color样式，旧版Edge通常能正确识别：

   <span style="color: blue;" title="square" class="blue-square"></span>
   <style>
     .blue-square::before {
       content: "◼";
     }
   </style>
   

4. 升级到Chromium内核的Edge
   现在微软的新版Edge已经全面切换到Chromium内核，和Chrome的渲染逻辑完全一致，你的原始代码在新版Edge里可以正常显示蓝色。如果你的用户群体已经大多使用新版Edge，这也是一劳永逸的解决方式。

关于是否是错误实现 #

你的代码写法完全符合HTML和CSS规范：用<span>包裹文本并设置inline color样式是标准用法，所以这属于旧版EdgeHTML内核的渲染bug，不是你的代码错误。

内容的提问来源于stack exchange，提问作者zemiacsik