html浏览器内核及兼容性

前端 · guoman · 于 5天前 发布 · 19 次阅读

国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。

以360浏览器为例,优先通过Webkit内核渲染主流网站,只有少量的网站通过IE内核渲染,以保证页面兼容性。出现一个控制手段——“内核控制标签”,只要你在自己的网站里增加一个meta标签,告诉360浏览器这个网站应该用哪个内核渲染,那么360浏览器就会在读取到这个标签后,立即切换对应的内核,并将这个行为应用于这个二级域名下所有网址。

其中,默认用

<meta http-equiv="X-UA-Compatible" content="IE=edge">

默认使用兼容模式,有时一些浏览器渲染慢或者效率低下,此时可以控制浏览器使用制定内核,方法如下: 1.浏览器默认内核的指定只需在head标签中添加一行代码即可:

若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand"> 

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。 content="webkit":让双核浏览器优先使用webkit内核渲染页面 双核:webkit内核 和 IE的Trident内核

一个网站大量采用了html5和css3,希望用户都以支持H5和css3的webkit内核打开页面则设置content="webkit"即可。 content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。

2.解决 不起作用的问题

在网页头部标签内

添加以下代码:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。

这三行代码分别作用于不同环境,如下所述:

<!-- 强制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"/>

3.bootstrap和ie浏览器兼容性问题可查看 https://www.cnblogs.com/chen-cheng/p/14292326.html

本文参考:https://www.jianshu.com/p/d294dc9a4943

本文由 guoman 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册