admin管理员组文章数量:1530058
1.问题描述
最近由于自己在浏览器使用体验上的差异，从Chrome换为了国产的360浏览器。然后项目在本地开发测试的时候，完全正常；但是在打包部署到服务器后，再用360浏览器访问网页时发现CSS错乱， 页面显示异常。但在换用Chrome、Firefox、QQ浏览器、Edge等其他浏览器访问又是正常的。
2.问题分析
其他浏览器能够正常访问页面，说明是360浏览器自己的问题。后来发现我的360浏览器默认的采用了：兼容模式，如下图所示：
于是尝试性的将模式切换为：极速模式 后，发现页面重新加载，显示正常了。并且发现其他的很多网站首次打开都默认是极速模式，那为啥自己的项目部署后访问默认是兼容模式呢，如果用户不了解浏览器的这些机制，使用体验将会非常差…于是在查阅资料后发现：
国产浏览器大多是双内核，甚至是三内核。一个Chromium内核，也就是Chrome使用的内核，切换到这个内核的模式一般叫极速模式；一个IE内核，称之为IE模式；有的甚至还有一个修改过的IE内核，称之为兼容模式。
这些浏览器这样做的原因是国内还有大量为IE浏览器量身定做的网站，为了兼容这些网站，不默认启用极速模式，而是根据代码判断选择IE模式或者兼容模式或者极速模式。
问题在于，浏览器自动选择经常判断错误，导致本来使用Webkit可以获得更好浏览效果的网站错误在IE模式中带着BUG运行。让开发者头疼。
2.解决方法
大多数多核浏览器支持通过meta标签指定浏览模式，所以，我们就可以通过meta代码强制浏览器启用Chromium内核，为用户提供最好的使用体验。在网页头部标签内添加以下代码：
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
三个都写上避免出现
< meta name=“renderer” content=“webkit” >不起作用的问题。
这三行代码分别作用于不同环境，如下所述：
<!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制Chromium内核，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
版权声明：本文标题：360浏览器下页面样式显示异常的解决方法 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726116806a1056168.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论