本文详解为何 ◼ 在 Edge 中显示为黑色而非预期红色，并指出关键语法错误——style 属性中分号位置不当，修正后即可跨浏览器（Firefox/Edge）统一渲染指定颜色。
本文详解为何 `◼` 在 edge 中显示为黑色而非预期红色，并指出关键语法错误——`style` 属性中分号位置不当，修正后即可跨浏览器（firefox/edge）统一渲染指定颜色。
在 HTML 中通过内联样式控制 Unicode 字符（如 ☄ ◼）的颜色时，看似简单的 style="color:#f00;" 实际上极易因细微语法问题导致浏览器兼容性差异。您遇到的现象——Firefox 正常显示红色，而 Edge 显示黑色——并非浏览器渲染引擎对字符颜色支持的固有差异，而是由一个隐蔽但致命的 HTML 语法错误引发。
? 根本原因：style 属性语法错误
原始代码中存在非法的属性写法：
<span style="color:#f00">◼</span> <!-- ↑ 分号写在了引号外面！ -->
根据 HTML 规范，style 属性值必须是完整包裹在引号内的合法 CSS 声明字符串。将分号 ; 放在引号外（"color:#f00";）属于无效标记，会导致整个 style 属性被浏览器忽略或解析失败。Firefox 对此类错误容忍度较高，可能尝试“修复”并应用 color；而 Edge（基于 Chromium 的新版 Edge 更严格遵循标准）则直接丢弃该 style 属性，回退至默认文本颜色（通常是黑色）。
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
✅ 正确写法必须确保所有 CSS 声明均位于引号内部，且分号仅用于分隔多个声明（末尾可省略）：
<!-- ✅ 推荐：清晰、标准、兼容性最佳 --> <span style="color: #f00;">◼</span> <!-- ✅ 合法（单声明末尾分号可选） --> <span style="color: #f00">◼</span> <!-- ✅ 多声明时，分号用于分隔 --> <span style="color: #f00; font-weight: bold;">◼</span>
? 提示：#f00 是 #ff0000 的简写，语义完全等价；建议添加空格提升可读性（如 color: #f00;），但非强制。
? 验证与测试建议
- 清除缓存后重载：Edge 可能缓存了旧版解析结果，硬刷新（Ctrl+F5）确保加载修正后的代码。
- 开发者工具检查：在 Edge 中按 F12 → 切换到 Elements 面板，展开 元素，确认 style="color: #f00;" 已正确解析（color 应出现在“Styles”侧边栏且无删除线）。
- 避免字体依赖：正如答案所证实，◼（U+25FC, BLACK MEDIUM SQUARE）是基础 Unicode 字符，主流系统字体（如 Arial、Segoe UI）均原生支持，无需强制指定 font-family 即可继承页面默认字体并响应 color 属性。强行设置 font-family: "Segoe UI Symbol" 反而可能引入不必要的字体回退风险。
⚠️ 注意事项与最佳实践
- 永远将 CSS 声明完整置于引号内：这是避免跨浏览器样式失效的第一道防线。
- 优先使用外部或 ：内联样式难以维护，复杂项目建议移至 CSS 文件或 ◼
- Unicode 字符颜色控制原理：对于大多数符号类 Unicode 字符（如 ▲ ▲、● ●、■ ■），其渲染依赖于当前字体的“彩色字体”支持（如 COLR/CPAL 表）。但 ◼ 属于单色字形（monochrome glyph），其颜色完全由 CSS color 属性控制，与字体无关——这正是“不改字体也能变色”的理论基础。
综上，修正 style 属性的语法即可一劳永逸解决该问题。无需 hack、无需字体干预，回归标准即得兼容。
