HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 简单几步,让你的网站兼容IE10(1)

简单几步,让你的网站兼容IE10(1)

当你决定将你的网站使用上HTML5并更好的支持IE10时,会有疑问这个过程是不是很复杂,其实让网站兼容IE10以及HTML5很简单,跟着下面步骤走,简单的几步就可以完成并确保兼容性:



一、简单几步让你的网站与HTML5 标准兼容

文档兼容性定义了一个浏览器将如何呈现你的网站。把自己的要求对浏览器告诉得越详细,用户的体验就会越好。在使用HTML5 这样的Web 标准时,一开始就要明确地声明HTML5 的文档类型:

  1. !DOCTYPE html
复制代码


这个标记将触发在Internet Explorer 9 和Internet Explorer 10 中的标准模式,同样在Chrome 和Firefox 中也工作得非常好。以下4个步骤可以使你的网站在各种浏览器和设备上呈现:



1. 确认你的网站使用的是标准模式

检查网站目前是否处于标准模式:


1) 在 Internet Explorer 10中打开网站。

注意:也可以按相同步骤更新Internet Explorer 9 中的文档模式。


2) 按 F12 键启动IE开发人员工具,或在Tools(工具)菜单中找到它,如下所示:


QQ截图20121029095409.png


注意:如果不习惯使用IE F12 开发人员工具来调试网页,请阅读链接教程:

  [url=http://msdn.microsoft.com/zh-cn/library/gg589507%28v=VS.85%2]http://msdn.microsoft.com/zh-cn/library/gg589507%28v=VS.85%2
  9.aspx[/url]
3) 检查网站是否显示“Browser Mode: IE10”和“Document Mode: IE10 standards”,如下面的工具栏所示:


QQ截图20121029095639.png



4) 如果你的网站已经处于Browser Mode: IE10 和Document Mode: IE10standards 状态,那么你已经完成了!注意,如果你的网站的浏览器模式和文档模式不是这样,一个常见的情况是Browser Mode = IE8 和Document Mode =Quirks(浏览器模式=IE8,文档模式=Quirks),这表明网站是为旧版本IE 设计的,可能不符合Web标准的要求。



QQ截图20121029095742.png





2. 实现Web 标准下的文档模式

强制使用IE10 标准模式来测试你的网站:

1) 将以下标签

  1. !DOCTYPE html
复制代码


插入页面顶部

2) 在浏览器中重新加载页面,使用F12 开发人员工具再次检查浏览器模式和文档模式。如果没有显示Browser Mode: IE10 和Document Mode: IE10 standards,请继续执行以下步骤。



3. 判断网站未处于标准模式的原因

很多问题与支持旧版本IE 有关。先要保证基于标准的代码在IE9和IE10 中正常呈现,然后再保留用于支持旧版本IE 的非标准代码。

1) 我的页面不是“Browser Mode: IE10”(浏览器模式:IE10)

可能的原因:你的网站可能处于Compatibility View(兼容性视图)中,被迫进入旧版浏览器模式以确保网站功能正常。

解决办法:检查网站是否在下面这个列表内

  http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml
2) 我的网页不是“Document Mode =IE10”

可能的原因:你的网站的doctype无效或缺失

解决办法:检查是否使用了有效、格式正确的doctype,如下所示:


  1. <!DOCTYPE html>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  3. 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  5. Strict//EN"
  6. "http://www.w3.org/TR/html4/strict.dtd">
复制代码

可能的原因:文档模式受到X-UA-Compatible 这个元标签的强行限制

解决办法:在页面上检查是否有类似下面的代码


  1. <metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">
  2. <metahttp-equiv="X-UA-Compatible"content="IE=8">
复制代码

删除找到的代码,重新加载页面,继续测试。



4. 在更新文档模式时,解决常见Internet Explorer 问题

很多问题与支持旧版本IE 有关。先要保证基于标准的代码在IE9 和IE10 中正常呈现,然后

再保留用于支持旧版本IE 的非标准代码。

可能的原因:条件注释(conditional comment)支持不同浏览器版本相关的功能

解决办法:检查是否存在运行非标准代码的条件注释。这些通常用来支持旧版本IE 的特定功能,以便让页面在旧版本下可以实现优雅降级。请检查是否存在类似下面的代码:


  1. <!--[if IE 8]>
  2. <p>Welcome to Internet Explorer 8.</p>
  3. <![endif]-->
复制代码

删除找到的代码,重新加载页面,继续测试。

可能的原因:用户代理监听支持浏览器版本相关的功能

解决办法:检查是否存在用户代理监听。用户代理监听通过浏览器模式中存在的用户代理字符串(user agent string)来定位浏览器。请检查是否存在类似下面的代码:

  if(version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {
  isIE = true;
  browserVersion = parseFloat(version[1]);
  }


用Web 标准实现功能探测。



5. 其他一些导致网页不能正常显示的原因


可能的原因:网站可能使用了浏览器已不再支持的特定功能。请尽可能使用Web 标准。

解决办法:运行兼容性检查工具。


可能的原因:网站可能使用了Metro 下 Internet Explorer 10 不支持的第三方插件或Flash、Quicktime和Silverlight。请尽可能使用Web 标准。

解决办法:学习如何创建不使用插件的体验。完整的基础教程很快就将推出。


可能的原因:网站可能加载了特定版本的浏览器CSS 文件:

解决办法:确保布局尽可能避免CSS hack。


IE Compatibility Cookbook(http://msdn.microsoft.com/en-us/library/ie/hh801219(v=vs.85).aspx)中提供了一个常见问题清单。如果你通过以上介绍的解决步骤还不能更新文档模式,请参考MSDN 的论坛来获得更多的问题解决。


通过以上几步,可以很方便的将你的网站兼容IE10,这是第一步,也是最重要的一步。当你的网站已经兼容了IE10之后,我们该看看如果添加一些HTML5元素和更多的IE10新功能了,这里可以查阅IE10兼容性白皮书来获得更丰富的帮助,下载地址:http://vdisk.weibo.com/s/bKgeq

【简单几步,让你的网站兼容IE10(1)】相关文章

1. 简单几步,让你的网站兼容IE10(1)

2. 简单几步,让你的网站兼容IE10(2)

3. 简单几步,让你的网站兼容IE10(3)

4. IE10让你的网站拥有更多曝光

5. 《实用技巧》—让你的网站变成响应式的3个简单步骤

6. css3简单几步画一个乾坤图

7. 是时候让你的网站用上HTML5了

8. 10个 jQuery 插件用于在你的网站中实现数据可视化

9. HTML5游戏开发 之 资源加载篇(1)

10. HTML5一周资讯回顾(11.14-11.21)

本文来源:https://www.51html5.com/a2935.html

点击展开全部

﹝简单几步,让你的网站兼容IE10(1)﹞相关内容

「简单几步,让你的网站兼容IE10(1)」相关专题