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

,顿时好费解,莫非万恶的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. Sicily 1151 魔板

    Constraints Time Limit: 1 secs, Memory Limit: 32 MB , Special Judge Description 魔板由8个大小相同方块组成,分别用涂上不 ...

  2. Swift_字符串详解(String)

    Swift_字符串详解(String) 类型别名 //类型别名 fileprivate func testTypeAliases() { let index = String.Index.self p ...

  3. C#读取和写入XML文件

    关于xml是属于一个比较重要的东西,在平时开发的过程中,这块内容最主要的是要掌握XML内容的读取和写入操作. 一.什么是XML? XML 指可扩展标记语言(EXtensible Markup Lang ...

  4. Array对象方法属性总结

    属性主要有三个:constructor;length;prototype; constructor(英文意思:构造器):返回对创建此对象的数组函数的引用.例如:var arr=new Array(); ...

  5. TypeScript设计模式之工厂

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  6. 关于JavaScript简单描述

    1.什么是JavaScript? JavaScript 是一种专门用于与网页交互而设计的脚本语言,它有三部分组成,那是哪三部分呢?分别是ECMAScript(提供核心语言功能),DOM(提供访问和操作 ...

  7. Eclipse:The selection cannot be launched,and there are no recent launches

    刚刚装上eclipse,于是就想写个Java程序来试试.结果写好之后不管是点击 run  还是  debug 结果都会弹出一个窗口,内容为: The selection cannot be launc ...

  8. shell笔记整理1---vim编译器基础应用(参考鸟哥)

    1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...

  9. Oracle-操作

    登录PL_SQL,输入用户名sys 密码 安装时输入的密码,选择 sysdba 打开plsqldev.exe所在目录下的PlugIns文件夹,如果没有请从其它地方拷入 打开运行命令窗口,输入命令 re ...

  10. 关于报错:AttributeError: module 'turtle' has no attribute 'setup' 问题

    对于我们菜鸟,往往安装软件后,都容易使用默认设置,结果将写的文件保存到了安装目录下. 这样造成了很大得隐患,如果写得文件,名称与安装目录下得系统文件名称重复,就容易出现以上报错. 解决方法:1.将文件 ...