flex布局 兼容国内浏览器的双核模式

flex布局不支持低版本ie内核是确定了,没办法的改变的事实,但是国产浏览器采用哪一个内核打开你的页面,这个是你可以控制的。

在html的<head>标签中加入如下代码:
<meta name="renderer" content="webkit">

然后浏览器打开你的页面时,会默认采用chrome内核来渲染页面,这是360浏览器的功能,其他国产浏览器也支持。但是用户非要点击“兼容模式”怎么办?我们还可以控制浏览器调用的ie渲染引擎的版本。

在html的<head>标签中加入如下代码:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

这个指令不要被edge这个单词迷惑,他指的不是edge浏览器。而是告诉ie渲染引擎,使用最新内核,且采用标准模式渲染页面。chrome这个指令也建议保留,他是让IE用户打开你的网页时,尝试调用chrome框架插件的。这是一个很老的ie插件,google出品,让ie支持chrome内核。最后这两个指令都添加完毕之后,能实现这样的效果,国产浏览器打开你的网页时,优先调用chrome内核渲染。如果用户强制点击,选择兼容模式,会调用操作系统内安装的IE的标准模式渲染你的页面。如果用户的操作系统内安装了ie9或以上,则正常显示flex。如果用户使用ie打开你的页面,当ie版本是9以上,或者系统内安装了chrome框架插件,flex也能正常工作。

猜你喜欢

转载自blog.csdn.net/cxz792116/article/details/80678242