本文详解为何 ◼ 在 Edge 中显示为黑色而非预期红色，并指出关键语法错误——style 属性中分号位置不当，修正后即可跨浏览器（Firefox/Edge）统一渲染指定颜色。

本文详解为何 `◼` 在 edge 中显示为黑色而非预期红色，并指出关键语法错误——`style` 属性中分号位置不当，修正后即可跨浏览器（firefox/edge）统一渲染指定颜色。

在 HTML 中通过内联样式控制 Unicode 字符（如 ☄ ◼）的颜色时，看似简单的 style="color:#f00;" 实际上极易因细微语法问题导致浏览器兼容性差异。您遇到的现象——Firefox 正常显示红色，而 Edge 显示黑色——并非浏览器渲染引擎对字符颜色支持的固有差异，而是由一个隐蔽但致命的 HTML 语法错误引发。

? 根本原因：style 属性语法错误

原始代码中存在非法的属性写法：

<span style="color:#f00";>&#9724;</span>
<!--                    ↑ 分号写在了引号外面！ -->

根据 HTML 规范，style 属性值必须是完整包裹在引号内的合法 CSS 声明字符串。将分号 ; 放在引号外（"color:#f00";）属于无效标记，会导致整个 style 属性被浏览器忽略或解析失败。Firefox 对此类错误容忍度较高，可能尝试“修复”并应用 color；而 Edge（基于 Chromium 的新版 Edge 更严格遵循标准）则直接丢弃该 style 属性，回退至默认文本颜色（通常是黑色）。

Great People Hedge Fund

协调AI代理，模拟传奇投资者分析股票，整合洞见，生成带有确信度的可执行投资信号。

下载

✅ 正确写法必须确保所有 CSS 声明均位于引号内部，且分号仅用于分隔多个声明（末尾可省略）：

<!-- ✅ 推荐：清晰、标准、兼容性最佳 -->
<span style="color: #f00;">&#9724;</span>

<!-- ✅ 合法（单声明末尾分号可选） -->
<span style="color: #f00">&#9724;</span>

<!-- ✅ 多声明时，分号用于分隔 -->
<span style="color: #f00; font-weight: bold;">&#9724;</span>

? 提示：#f00 是 #ff0000 的简写，语义完全等价；建议添加空格提升可读性（如 color: #f00;），但非强制。

? 验证与测试建议

1. 清除缓存后重载：Edge 可能缓存了旧版解析结果，硬刷新（Ctrl+F5）确保加载修正后的代码。
2. 开发者工具检查：在 Edge 中按 F12 → 切换到 Elements 面板，展开 <span> 元素，确认 style="color: #f00;" 已正确解析（color 应出现在“Styles”侧边栏且无删除线）。
3. 避免字体依赖：正如答案所证实，◼（U+25FC, BLACK MEDIUM SQUARE）是基础 Unicode 字符，主流系统字体（如 Arial、Segoe UI）均原生支持，无需强制指定 font-family 即可继承页面默认字体并响应 color 属性。强行设置 font-family: "Segoe UI Symbol" 反而可能引入不必要的字体回退风险。

⚠️ 注意事项与最佳实践

• 永远将 CSS 声明完整置于引号内：这是避免跨浏览器样式失效的第一道防线。
• 优先使用外部或 <style> 块：内联样式难以维护，复杂项目建议移至 CSS 文件或 <style> 标签中，例如：

  <style>
    .red-square { color: #f00; }
  </style>
  <span class="red-square">&#9724;</span>

• Unicode 字符颜色控制原理：对于大多数符号类 Unicode 字符（如 ▲ ▲、● ●、■ ■），其渲染依赖于当前字体的“彩色字体”支持（如 COLR/CPAL 表）。但 ◼ 属于单色字形（monochrome glyph），其颜色完全由 CSS color 属性控制，与字体无关——这正是“不改字体也能变色”的理论基础。

综上，修正 style 属性的语法即可一劳永逸解决该问题。无需 hack、无需字体干预，回归标准即得兼容。