Mac 系统 + Chrome浏览器 网页前端出现中文文字反转或顺序错乱

问题背景

React开发的系统,收到一个BUG反馈,*“号个人统计”文字不正确,应为“个人号统计”*。  
收到BUG后,打开浏览器查验是什么情况,难道犯了最基本的错误,Ctrl C也能错。  

随后还是查验BUG:
1. 打开浏览器,发现我的浏览器上显示“个人号统计”
2. 使用Chrome浏览器、Firefox、Edge 均为返现次情况
3. 查看代码,确实是最普通的文字 ```<span>个人号统计</span>```

最后去找BUG的发起人,确认BUG的重现现象为:
1. Mac 系统 + Chrome浏览器
2. 只有Chrome浏览器才出现,Safari浏览器也未出现
3. 不只是某一个Mac + Chrome出现,在其他的同样条件下出现了问题

问题截图

image

问题产生原因和解决

经过排查,发现问题是chrome的一个翻译功能导致的,在window + chrome下,主动点击翻译功能,即可重现同样的问题。但是在mac + chrome 自动翻译了。而且也没提示当前处于翻译模式下。

解决问题的根源是chrome 为什么会自动翻译了。查看浏览器源代码发现html lang="en"

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body></body>
</html>

浏览器检测设置了当前html lang为en(英文)网页,即为英文网页,就根据地域、个人习惯,翻译成本地的语言。本地语言也是中文,就出现了中文翻译中文的情况。页面其它的文字都没有改变,只有某些文字出现了顺序不正确,才导致的此次情况。

解决方法是将html 的lang移除,或设置为zh

<html lang="zh">
</html>

附chrome翻译图

  1. 错误情况
    image

  2. 正常情况
    image

总结

  1. 平时开发网页时,没有注意过html lang这个属性
  2. 使用react 脚手架生成出来的index.html网页被设置为html lang="en",没注意到

猜你喜欢

转载自www.cnblogs.com/xakoy/p/9571949.html