Chrome 65.0.3325.146在macOS High Sierra中CSSStyleSheet应用区域设置是否为Bug？

这确实是一个已确认的浏览器Bug，刚好出现在你提到的macOS High Sierra + Chrome 65.0.3325.146这个特定环境组合中。

问题根源 #

按照CSS官方规范，样式数值的序列化必须使用英文点号（.）作为小数分隔符，完全不受系统区域设置的影响。但Chrome 65的这个版本在处理CSSStyleSheet的样式值输出时，错误地调用了系统区域的格式化规则——在俄语这类默认用逗号做小数分隔符的系统里，就会把样式里的点号转换成逗号，导致输出不符合规范。

复现代码（对应你的场景） #

<!DOCTYPE html>
<html>
<body>
<script>
  const sheet = new CSSStyleSheet();
  // 插入一个带小数的样式规则
  sheet.insertRule('body { opacity: 0.5; }');
  const rule = sheet.cssRules[0];
  // 控制台输出样式值
  console.log(rule.style.opacity);
</script>
</body>
</html>

输出对比 #

• 实际输出（俄语系统区域设置下）：0,5
• 预期输出（符合CSS规范）：0.5

修复情况与解决办法 #

这个问题在Chrome 66及之后的版本里已经被官方修复了——修复后的CSSStyleSheet会严格遵循CSS规范，样式值的序列化不再受系统区域设置干扰。

如果你的环境还停留在Chrome 65，建议尽快升级到最新稳定版；如果暂时没法升级，可以在代码里手动处理这类数值字符串，比如用str.replace(',', '.')把逗号替换成点号后，再进行后续的解析或逻辑处理。

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