Win10 正式版 系统 下载 主题 平板

重定义Modern UI,打造完美Windows全新体验

Windows10下载|安装|新手宝典|必备软件

远景论坛 - 微软极客社区 › 论坛 › 全新 Windows 论坛 - 微软全新一代操作系统 › Windows 进阶技术 > 【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10 ...

12 3 4 下一页

返回列表发表新帖

查看: 33246|回复: 70

[技术] 【吐血整理分享】IE10相关简单几步，让你的网站兼容IE10（第一弹！） [复制链接]
电梯直达
复制

灰兔纸是Geek

Rank: 5 Rank: 5 Rank: 5

UID: 2998065
帖子: 152
PB币: 817
贡献: 0
技术: 0
活跃: 21

楼主

发表于 2012-10-24 13:02:03 IP属地江苏 |只看该作者 |倒序浏览

本帖最后由灰兔纸是Geek 于 2012-11-7 13:49 编辑

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

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

文档兼容性定义了一个浏览器将如何呈现你的网站。把自己的要求对浏览器告诉得越详细，用户的体验就会越好。在使用HTML5 这样的Web 标准时，一开始就要明确地声明 HTML5 的文档类型：<!DOCTYPE html>这个标记将触发在 Internet Explorer 9 和Internet Explorer 10 中的标准模式，同样在 Chrome 和Firefox 中也工作得非常好。以下4个步骤可以使你的网站在各种浏览器和设备上呈现：

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

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

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

o 注意：也可以按相同步骤更新 InternetExplorer 9 中的文档模式。

2) 按 F12 键启动IE开发人员工具，或在Tools（工具）菜单中找到它，如下所示：

o 注意：如果不习惯使用IE F12开发人员工具来调试网页，请阅读链接教程：http://msdn.microsoft.com/zh-cn/library/gg589507%28v=VS.85%29.aspx

3) 检查网站是否显示“Browser Mode: IE10”和“Document Mode: IE10standards”，如下面的工具栏所示：

4) 如果你的网站已经处于Browser Mode: IE10 和 Document Mode:IE10 standards 状态，那么你已经完成了！

注意，如果你的网站的浏览器模式和文档模式不是这样，一个常见的情况是Browser Mode = IE8 和Document Mode =Quirks（浏览器模式=IE8，文档模式=Quirks），这表明网站是为旧版本IE设计的，可能不符合Web 标准的要求。

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

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

1) 将以下标签<!DOCTYPE html>插入页面顶部

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

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

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

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

o 可能的原因：你的网站可能处于CompatibilityView（兼容性视图）中，被迫进入旧版浏览器模式以确保网站功能正常。

解决办法：检查网站是否在下面这个列表内http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml

2) 我的网页不是“Document Mode =IE10”

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

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

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

复制代码

o 可能的原因：文档模式受到X-UA-Compatible这个元标签的强行限制解决办法：在页面上检查是否有类似下面的代码

<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">
<metahttp-equiv="X-UA-Compatible"content="IE=8">

复制代码

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

4. 在更新文档模式时，解决常见InternetExplorer 问题
很多问题与支持旧版本IE 有关。先要保证基于标准的代码在IE9 和IE10 中正常呈现，然后再保留用于支持旧版本IE 的非标准代码。
o 可能的原因：条件注释（conditionalcomment）支持不同浏览器版本相关的功能
解决办法：检查是否存在运行非标准代码的条件注释。这些通常用来支持旧版本IE 的特定功能，以便让页面在旧版本下可以实现优雅降级。请检查是否存在类似下面的代码：

<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->

复制代码

删除找到的代码，重新加载页面，继续测试。
o 可能的原因：用户代理监听支持浏览器版本相关的功能
解决办法：检查是否存在用户代理监听。用户代理监听通过浏览器模式中存在的用户代理字符串（user agent string）来定位浏览器。请检查是否存在类似下面的代码：

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

复制代码

用Web 标准实现功能探测。

5. 其他一些导致网页不能正常显示的原因
o 可能的原因：网站可能使用了浏览器已不再支持的特定功能。请尽可能使用Web 标准。
解决办法：运行兼容性检查工具。
o 可能的原因：网站可能使用了Metro 下 Internet Explorer 10 不支持的第三方插件或Flash、Quicktime 和Silverlight。请尽可能使用Web 标准。
解决办法：学习如何创建不使用插件的体验。完整的基础教程很快就将推出。
o 可能的原因：网站可能加载了特定版本的浏览器CSS 文件：
解决办法：确保布局尽可能避免CSShack。

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