360浏览器下页面样式显示异常的解决方法

2024-04-07 15:59:33

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浏览器下页面样式显示异常的解决方法相关推荐

WPF程序在Win7系统下字体显示异常（解决方法记录）
WPF程序在Win7系统下字体显示异常(解决方法记录) 问题描述 WPF程序在大部分客户电脑上正常运行,字体显示正常.仅在某个客户电脑上显示异常.并且不是所有字体都显示为异常状况.指定了具体字体的(如 ...
360浏览器无法看html5,win7在360浏览器上不能看flash的彻底解决方法推荐
win7系统在360浏览器上不能看flash的页面,如何才能彻底解决呢?很多用户在使用360浏览器的时候,会出现不能播放flash的问题,具体是哪个环节的原因用户们并不清楚,在用户们描述了相关的情况之 ...
linux 图标显示异常,在Ubuntu 18.04系统中VSCode图标显示异常的解决方法
以下介绍在Ubuntu 18.04系统中VSCode图标显示异常的解决方法,同时附上在Ubuntu 18.04系统中安装Anaconda3-5.3.0方法.VSCode是一款全平台开发的编辑器,它具有 ...
Win10网络102错误代码该怎么办?360浏览器网络连接错误错误代码 102的解决方法
在WIn10系统中使用360安全浏览器的用户反应无法打开网页,提示网络连接错误错误代码 102 该怎么办?在我们使用360浏览器的时候遇到这样的问题可能是网卡亦有可能是网络需要重置或是spl出错所引 ...
html设置打开页面后自动关闭,Win7系统打开IE浏览器后页面自动关闭的四种解决方法...
很多用户都遇到一件很奇葩的问题,就是在win7系统下打开IE浏览器,浏览网页,没有进行任何操作,突然所有页面就自动关闭了,又要重新启动,没过多久又出现这样情况,怎么回事呢?导致Win7系统打开IE浏览 ...
今日头条适配方案造成Dialog显示异常的解决方法
今日头条适配方案造成Dialog显示异常的解决方法产生问题的原因由于该适配方案是更改的全局的density, 对整个项目生效,所以在使用第三方View或者系统的的view时,如果和项目中的设计尺寸 ...
前端IE或edge页面iframe显示白屏解决方法
前端IE或edge页面iframe显示白屏解决方法问题是这样的 :页面里面有iframe,谷歌可以正常显示,ie不行. 但是点击导航栏又可以显示(我做的是导航栏点击换页面): 晕,网上很多我都试过了 ...
IEEE conference latex模板自己电脑编译后变形、字体显示异常的解决方法
IEEE conference latex模板自己电脑编译后变形.字体显示异常的解决方法最近在投IEEE下面的一个会议,但是把 IEEE 会议模板下载到自己电脑编译时,和原版格式不对,搞得我心态爆炸 ...
win7系统IE11浏览器导致页面无法点选日期解决方法：
win7系统IE11浏览器导致页面无法点选日期解决方法: win7系统IE11浏览器导致页面无法点选日期解决方法:方法一:1.打开ie11浏览器,然后点击"工具--Internet选项&qu ...
win7快捷图标显示异常的解决方法
windows7快捷方式图标显示异常的解决 --------------- win7容易出现快捷方式图标无故丢失,或者出现非图片的异常状况,但仍能启动程序,在快捷方式属性里更改图标也没用,有些 ...

最新文章

热门文章