meta标签中http-equiv属性的属性值X-UA-Compatible详解

好久没有写前端的文章了,之前一直想从新把html5和css3的知识系统的学习下,但是人一旦放松,就会变得懒散,结果这么久过去了,还是没有好好学习。

这段时间我想搞个娱乐明星资讯站,一直在使用wordpress还是帝国cms之间纠结,其实我的需求简单,主要就是内容展示。

我喜欢wordpress的使用简单,毕竟我主要是以文字图片内容为主,wordpress真的挺适合,但是wordpress下没有我喜欢的主题,而且SEO上需要的一些功能,我也没有好的办法解决。

而帝国真的很强大,几乎可以说是万能的,对于搭建一个娱乐资讯站是小儿科,不过帝国对我来说最大的问题就是使用复杂,进入后台看到那么多的功能,我都头疼,并且非常重要的是也没有我喜欢的主题模板。

所以想来想去,我眼下最应该解决的找到合适的主题,寻找了好久还是没有能入眼的,精美的不少,但不是功能太杂乱,就是为了精美而代码冗余,因此还是决定自己开发一套主题吧。

前面说了这么多,感觉和今天的标题有点跑题了,赶紧拉回思绪说一说meta标签中http-equiv属性的属性值X-UA-Compatible的详解。

对于html5我算是入门了,之前的开发习惯不符合html的标准,而且很多新的标签元素我都没有详细了解过。

这不是我在参考其他人主题的时候,发现如下代码:

<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">

这个meta标签的属性,我看很多网站都在使用,但我真的是第一次认真了解。查过资料之后,了解到它其实是指定浏览器按某种方式渲染。下面就把我找到的资料分享下,算是共同学习了。

X-UA-Compatible是针对IE8新加的一个设置,是为了避免制作出的页面在IE8下面出现错误,而指定使用其他浏览器版本来渲染网页内容,对于IE8之外的浏览器是不识别的。

上面meta标签的http-equiv属性是所有主流浏览器都支持属性,而其属性值X-UA-Compatible确是为了我们定义浏览器的渲染方式。content中定义了我们指定的浏览器

举例来说:

<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">

意思就是强制浏览器按照特定的版本标准进行渲染,但不支持IE7及以下版本。

如果用分号(;)分隔,对于不同的浏览器版本就有不同的兼容性。

例如:<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" /> 意思就是将IE8和IE7按照IE7标准渲染,但是IE9还是按照IE9的标准渲染

不过现在IE越来越不受人待见,而且最新的Edge浏览器终于像标准看齐。

所以很多网页开发者都是直接写成这样:

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

者这样:

<meta http-equiv="X-UA-Compatible" content="id=edge,chrome=1">

这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器,而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。而上文提到的那个meta标记,则是在是安装了Google Chrome Frame后,用来指定页面使用chrome内核来渲染。

弄明白这个标签之后,我将在我的主题中使用<meta http-equiv=X-UA-Compatible content=”ie=edge“>的写法,因为百度都是这样写的。

这里补充一个meta中的name可以设置多项,每一项都有不同的含义,具体如图所示:

meta中的name可以设置多项

 

未经允许不得转载:地下室先生博客 » meta标签中http-equiv属性的属性值X-UA-Compatible详解

赞 (0) 打赏作者

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏