今天再浏览大淘宝首页时,突然看到这么一个东东:

,顿时好费解,莫非万恶的IE浏览器认识到自己以往的罪孽,开始兼容chrome了??!

于是本着不懂就百度的神精,开始纵横于各大铁耙,勃哥,终于找到了许许多的答案,这里做一下总结,就是我的文章啦啦啦~~~

首先IE还是那么坏,是不会顾及我们这些前端开发人员的死活的!!

IE=edge,chrome=1 的意思并不是IE兼容chrome,相反而是chrome 偷偷 挖了IE的墙角,不懂?没关系,听我一点点解释:

众所众知,IE虽然是浏览器界的老大,但是非非常的烂,不仅bug多,而且对于很多新的css属性,尤其是H5属性,并不支持,比如,有一次我想给网页做一个颜色渐变的图像,使用了linear-gradient元素,但在IE里死活显示不粗来,我开始以为自己的能力有问题,于是流窜于各大铁耙,啵客,拜访各个品种的大牛,但始终解决不了,正在我即将对生活因绝望而失去信心时,忽然一个帖子飞到了我的眼睑:

  尼玛,不支持,我当时就想拿刀砍了微软这帮技术禽兽!等着吧,过段时间,我就给微软的IE算一下总账!

扯远了,整理下发型,鹅还是个狠乖的孩纸滴~~

下面来简单说一下这个标记的语法:

http-equiv 是指代服务器相应类型,而http-equiv="X-UA-Compatible"这个是IE8的专用标记,是用来指定Internet Explorer 8 浏览器模拟某个特定版本IE浏览器的渲染方式,以此来解决IE浏览器的兼容问题,例如 曾经css hacker常用的模拟IE7渲染方式的代码:

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

而在这里使用了Google Chrome 浏览器内嵌框架 - GCF,可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8,如果安装了GCF,则使用GCF来渲染页面「"chrome=1"」,如果没有安装GCF,则使用最高版本的IE内核进行渲染「"IE=edge"」。

但是我在w3.org的html5验证工具下:

提示不好使!!

有错误咱不怕,怕的就是不知道自己错在哪里!

于是继续痛苦而奇妙的百度之旅,在漫漫上下求索之后,总于找到了,原来还要配置服务器,我用的Nginx,所以先献上Nginx的配置http equiv规则,在Nginx服务器中,只需要找到 ginxconf ginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可:

add_header "X-UA-Compatible" "IE=Edge, chrome=1";

但是相信还有一些小伙伴用的是其他种类的服务器,所以再补充上Apache与IIS的:

apache服务器,确保 mod_headers 和 mod_setenvif 是available的,然后在httpd.conf「新版Apache的配置文件是 apache2.conf」或者在.htaccess中加入以下规则:

<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule >
</IfModule >

Windows Server在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可:

<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name = "X-UA-Compatible" value = "chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

day002-HTML知识点总结:浏览器兼容性之指定IE浏览器使用chrome内核渲染页面的更多相关文章

  1. 【笔记】让360浏览器用chrome 内核渲染你的网页

    学校的项目还处在测试阶段 有一个痛点就是有一些页面在360浏览器中默认以ie 内核渲染 这样很不好 以为部分页面因技术方面的不足导致并不能很好地兼容ie 浏览器,于是在网上找了一下答案 可真还有解决方 ...

  2. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  3. 360或其他双核浏览器下在兼容模式用chrome内核渲染的方法

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-COM ...

  4. 指定IE浏览器渲染方式

    <meta http-equiv="X-UA-Compatible" content="IE=7" />以上代码告诉IE浏览器,无论是否用DTD声明 ...

  5. 浏览器兼容性知识&测试计划&测试报告

    浏览器兼容性知识&测试计划&测试报告 浏览器兼容性问题:网页或网站兼容性问题,因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同:以及用户客户端 ...

  6. 从零开始的全栈工程师——html篇1.8(知识点补充与浏览器兼容性)

    知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...

  7. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. 一条代码解决各种IE浏览器兼容性问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...

  9. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

随机推荐

  1. Javascript高级程序设计——语法、关键字、保留字、变量、数据类型

    1.了解基本语法,JS大小写区分.注释风格.什么是严格模式等. 2.知道ES3和ES5的关键字和保留字大概有哪些,如果使用关键字会报什么错,使用保留字决定于特定浏览器引擎. 3.全局变量和局部变量的定 ...

  2. Pin学习笔记--安装及一些基本知识

    具体请见用户手册Pin 3.2 User Guide https://software.intel.com/sites/landingpage/pintool/docs/81205/Pin/html/ ...

  3. ajax跨域问题及解决

    overview ajax是一种创建交互式网页应用的网页开发技术,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换.而ajax的跨域问题则是请求了其他项目的接口地址,当协议.子域名 ...

  4. Asp.net mvc 知多少(九)

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  5. Form表单中method="post/get'的区别

    Form提供了两种数据传输的方式--get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...

  6. Mixin模式:带实现的协议

    Mixin(织入)模式并不是GOF的<设计模式>归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用.简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是 ...

  7. Material Design学习-----CollapsingToolbarLayout

    博客引用(http://www.open-open.com/lib/view/open1438265746378.html) CollapsingToolbarLayout为我们提供了一个很方便的顶部 ...

  8. lua string.sub截取中英文

    cocos2dx 2.x环境,要做一个截取很长的字符串的前100个字符显示的小功能. PC环境ok,出了ios包发现有时候这个字符串会显示不出,猜测了下可能是跟中文字在lua里每个字占3个字符有关,举 ...

  9. 学习HTML5一周的收获1

    HTML5的基本结构 学习了title标签(显示网站名称),link标签(链接文件,可做网页美化) 快捷键:Ctrl+/ 注释 学习[meta标签] 1.charset属性:单独使用,设置文档字符集编 ...

  10. 1782: [Usaco2010 Feb]slowdown 慢慢游

    1782: [Usaco2010 Feb]slowdown 慢慢游 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 570  Solved: 346[Sub ...