Internet Explorer 10 兼容性白皮书(一)
让你的网站与最新的网络标准兼容 文档兼容性定义了一个浏览器将如何呈现你的网站。把自己的要求对浏览器告诉得越详细,用户的体验就会越好。在使用HTML5这样的Web标准时,一开始就要明确地声明HTML5的文档类型:
这个标记将触发在IE9和IE10中的标准模式,它在Chrome和Firefox中也工作得非常好。以下4个步骤可以使你的网站在各种浏览器和设备上呈现:
第1步:确认你的网站使用的是标准模式 检查网站目前是否处于标准模式: 1.在IE10平台预览版中打开网站。 注意:也可以按相同步骤更新IE9中的文档模式,这无需下载预览版。 2.按F12键启动IE开发人员工具,或在Tools(工具)菜单中找到它 注意:如果不习惯使用IE F12开发人员工具来调试网页,请阅读链接教程。 3.检查网站是否显示“Browser Mode: IE10”和“Document Mode: IE10 standards” 如果你的网站已经处于Browser Mode: IE10和Document Mode: IE10 standards状态,那么你已经完成了!注意,如果你的网站的浏览器模式和文档模式不是这样,一个常见的情况是Browser Mode = IE8和Document Mode = Quirks(浏览器模式=IE8,文档模式=Quirks),这表明网站是为旧版本IE设计的,可能不符合Web标准的要求。
第2步:实现Web标准下的文档模式 强制使用IE10标准模式来测试你的网站: 将以下标签
插入网站的HTML页面中 要了解如何更新doctype,请参阅这里。 在浏览器中重新加载页面,使用F12开发人员工具再次检查浏览器模式和文档模式。如果没有显示Browser Mode: IE10和Document Mode: IE10 standards,请继续执行以下步骤。
第3步:判断网站未处于标准模式的原因 很多问题与支持旧版本IE有关。先要保证基于标准的代码在IE9和IE10中正常呈现。然后再保留用于支持旧版本IE的非标准代码。
我的页面不是“Browser Mode: IE10”(浏览器模式:IE10) 可能的原因:你的网站可能处于CompatibilityView(兼容性视图)中,被迫进入旧版浏览器模式以确保网站功能正常。 解决办法:检查网站是否在这个列表内。要了解兼容性视图列表和请求从列表中移除的更多内容,请参阅这里。
我的网页不是“Document Mode =IE10” 可能的原因:你的网站的doctype无效或缺失 解决办法:检查是否使用了有效、格式正确的doctype,如下所示:
可能的原因:文档模式受到X-UA-Compatible这个元标签的强行限制要了解如何更新doctype,请参阅这里。 解决办法:在页面上检查是否有类似下面的代码。
第4步:在更新文档模式时,解决常见IE问题删除找到的代码,重新加载页面。继续测试。要了解如何指定文档兼容模式,请参阅这里。 很多问题与支持旧版本IE有关。先要保证基于标准的代码在IE9和IE10中正常呈现。然后再保留用于支持旧版本IE的非标准代码。 可能的原因:条件注释(conditionalcomment)支持不同浏览器版本相关的功能 解决办法:检查是否存在运行非标准代码的条件注释。这些通常用来支持旧版本IE的特定功能,以便让页面在旧版本下可以实现优雅降级。请检查是否存在类似下面的代码:
可能的原因:用户代理监听支持浏览器版本相关的功能删除找到的代码,重新加载页面。继续测试。要了解条件注释的更多内容,请参阅这里。 解决办法:检查是否存在用户代理监听。用户代理监听通过浏览器模式中存在的用户代理字符串(user agent string)来定位浏览器。请检查是否存在类似下面的代码:
if(version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {
isIE = true;
browserVersion = parseFloat(version[1]);
} 其他一些导致网页不能正常显示的原因:首先要用Web标准实现功能探测。要了解用户代理字符串的更多内容,请参阅这里。关于 IE10的用户代理字符串,请参阅这里。 可能的原因:网站可能使用了浏览器已不再支持的特定功能。请尽可能使用Web标准。 解决办法:运行兼容性检查工具。 可能的原因:网站可能使用了Metro 下 IE10不支持的第三方插件或Flash、Quicktime和Silverlight。请尽可能使用Web标准。 解决办法:学习如何创建不使用插件的体验。完整的基础教程很快就将推出。 可能的原因:网站可能加载了特定版本的浏览器CSS文件: 解决办法:确保布局尽可能避免CSS hack。要了解如何检查CSS问题,请参阅这里。
IECompatibility Cookbook中提供了一个常见问题清单。
如果你通过以上介绍的解决步骤还不能更新文档模式,请参考MSDN的论坛。 更多细节,请参阅以下文章:
定义文档能力 @ MSDN 调查文档模式的问题 @ MSDN IE10中互操作的Quirks模式 @ IE Blog 兼容性检查工具(CompatibilityInspector tool) @ IETestDrive.com 不要忘记添加Doctype @ W3C.org 以上内容来自于:http://blog.reybango.com/2012/01/09/fix-common-ie-problems-update-your-docmode-for-web-standards/