简单几步,让你的网站兼容IE10(1)
当你决定将你的网站使用上HTML5并更好的支持IE10时,会有疑问这个过程是不是很复杂,其实让网站兼容IE10以及HTML5很简单,跟着下面步骤走,简单的几步就可以完成并确保兼容性: 一、简单几步让你的网站与HTML5 标准兼容 文档兼容性定义了一个浏览器将如何呈现你的网站。把自己的要求对浏览器告诉得越详细,用户的体验就会越好。在使用HTML5 这样的Web 标准时,一开始就要明确地声明HTML5 的文档类型:
1. 确认你的网站使用的是标准模式 检查网站目前是否处于标准模式: 1) 在 Internet Explorer 10中打开网站。 o 注意:也可以按相同步骤更新Internet Explorer 9 中的文档模式。 2) 按 F12 键启动IE开发人员工具,或在Tools(工具)菜单中找到它,如下所示: o 注意:如果不习惯使用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%29.aspx[/url] 3) 检查网站是否显示“Browser Mode: IE10”和“Document Mode: IE10 standards”,如下面的工具栏所示: 4) 如果你的网站已经处于Browser Mode: IE10 和Document Mode: IE10standards 状态,那么你已经完成了!注意,如果你的网站的浏览器模式和文档模式不是这样,一个常见的情况是Browser Mode = IE8 和Document Mode =Quirks(浏览器模式=IE8,文档模式=Quirks),这表明网站是为旧版本IE 设计的,可能不符合Web标准的要求。 2. 实现Web 标准下的文档模式 强制使用IE10 标准模式来测试你的网站: 1) 将以下标签
2) 在浏览器中重新加载页面,使用F12 开发人员工具再次检查浏览器模式和文档模式。如果没有显示Browser Mode: IE10 和Document Mode: IE10 standards,请继续执行以下步骤。 3. 判断网站未处于标准模式的原因 很多问题与支持旧版本IE 有关。先要保证基于标准的代码在IE9和IE10 中正常呈现,然后再保留用于支持旧版本IE 的非标准代码。 1) 我的页面不是“Browser Mode: IE10”(浏览器模式:IE10) o 可能的原因:你的网站可能处于Compatibility View(兼容性视图)中,被迫进入旧版浏览器模式以确保网站功能正常。 解决办法:检查网站是否在下面这个列表内 http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml2) 我的网页不是“Document Mode =IE10” o 可能的原因:你的网站的doctype无效或缺失 解决办法:检查是否使用了有效、格式正确的doctype,如下所示:
o 可能的原因:文档模式受到X-UA-Compatible 这个元标签的强行限制 解决办法:在页面上检查是否有类似下面的代码
删除找到的代码,重新加载页面,继续测试。 4. 在更新文档模式时,解决常见Internet Explorer 问题 很多问题与支持旧版本IE 有关。先要保证基于标准的代码在IE9 和IE10 中正常呈现,然后 再保留用于支持旧版本IE 的非标准代码。 o 可能的原因:条件注释(conditional comment)支持不同浏览器版本相关的功能 解决办法:检查是否存在运行非标准代码的条件注释。这些通常用来支持旧版本IE 的特定功能,以便让页面在旧版本下可以实现优雅降级。请检查是否存在类似下面的代码:
删除找到的代码,重新加载页面,继续测试。 o 可能的原因:用户代理监听支持浏览器版本相关的功能 解决办法:检查是否存在用户代理监听。用户代理监听通过浏览器模式中存在的用户代理字符串(user agent string)来定位浏览器。请检查是否存在类似下面的代码: if(version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {isIE = true; browserVersion = parseFloat(version[1]); }
5. 其他一些导致网页不能正常显示的原因 o 可能的原因:网站可能使用了浏览器已不再支持的特定功能。请尽可能使用Web 标准。 解决办法:运行兼容性检查工具。 o 可能的原因:网站可能使用了Metro 下 Internet Explorer 10 不支持的第三方插件或Flash、Quicktime和Silverlight。请尽可能使用Web 标准。 解决办法:学习如何创建不使用插件的体验。完整的基础教程很快就将推出。 o 可能的原因:网站可能加载了特定版本的浏览器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)】相关文章 8. 10个 jQuery 插件用于在你的网站中实现数据可视化 本文来源:https://www.51html5.com/a2935.html ﹝简单几步,让你的网站兼容IE10(1)﹞相关内容
「简单几步,让你的网站兼容IE10(1)」相关专题其它栏目也许您还喜欢 |