Chrome中阿拉伯语变音符号颜色样式不生效，Firefox正常求助

问题原因 #

Chrome对阿拉伯语的**组合变音符号（附属字符）**的行内元素渲染逻辑与Firefox不同，直接用<span>包裹单个变音符号时，Chrome无法正确识别并应用颜色样式。

修复方案 #

方案1：调整CSS样式强制正确渲染 #

给.redcolor类添加display: inline-block和unicode-bidi: isolate属性，确保Chrome能独立识别并渲染包裹的变音符号：

完整代码示例

HTML

<div id="testdiv"></div>

JavaScript

let str = "شَيْءٍ ";
str = str.replace(/(\u064D)/g, "<span class='redcolor'>$1</span>");
document.getElementById("testdiv").innerHTML = str;

CSS

.redcolor {
  color: red;
  display: inline-block;
  unicode-bidi: isolate;
}

方案2：备选方案（固定位置符号适用） #

如果动态文本场景下方案1仍有问题，可尝试用CSS伪元素替换符号（仅适合符号位置固定的场景）：

.testdiv::after {
  content: "\064D";
  color: red;
}

说明 #

unicode-bidi: isolate用于强制Chrome将包裹的字符视为独立文本单元，避免阿拉伯语双向文本渲染规则干扰样式；display: inline-block确保元素能正确承载样式，不会被周围阿拉伯语字符合并渲染。

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