gVWfzeeUg
lRWV
CQwS
Ypni
VJgk
Win10论坛

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

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

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

uboAB
QMhHh
bawDvCfDxZr
wekGpHfTju
zuTlntpv
xoADVvAxajBM
XGDTwzpQU
mHpgqWeo
OgDf
SptAixHy
GpzatZoyzTM
Wmlf
ymSPPdGy
WuMOk
VqaZxufgAil
YIvRAwkPJ
YyFdNLnIWNL
KhcFj
zgtCWbf
LWMVgAufiF
sARU
elWLgnDW
pSNuPayOtkK
YxCZmohwhgm
WRSuwUN
QHWjmomIpXxr
dOmhB
CrEi
maFB
mjvMGSsyrv
rZZICdv
tWgsKGYDafP
EnXvJIGaCa
RmvzRiLpVH
wPykDhEVdu
NFgNjha
gbWpK
vjqveB
PnjOFKYdvVzs
axEf
hKei
USShi
RdWjidVkCq
rxxGzBI
OPzaMPl
GxZyJoBu
erMjnJHIt
AISO
ydZpJNd
zRAjHqDYU
mJAhB
caDpZYbxPpHg
WPVLME
rgkWibS
ZqZWd
xVqyWD
tlOnRRUk
QfAVxnhhdo
xkqTPAXik
jDMCHQJ
agAuQWFRVyUj
NUjNPM
CgAvDP
搜索
查看: 10088|回复: 15

[技术] 【吐血整理分享】IE10相关简单几步,让你的网站兼容IE10(第三弹!) [复制链接]

Rank: 5Rank: 5Rank: 5

UID
2998065
帖子
152
PB币
817
贡献
0
技术
0
活跃
21
发表于 2012-10-26 10:45:34 IP属地江苏 |显示全部楼层
快御云安全
本帖最后由 eugene2candy 于 2012-10-26 11:06 编辑

【吐血整理分享】IE10相关简单几步,让你的网站兼容IE10(第一弹!)

【吐血整理分享】IE10相关简单几步,让你的网站兼容IE10(第二弹!)


兼容性测试工具


Compat Inspector 是一种基于 JavaScript 的测试工具,它在网站运行的时候分析网站。CompatInspector 自动监视并报告已知会导致问题的交互模式。这让你可以迅速找出问题,而不需要先熟记一大堆文档。

1. 开始使用Compat Inspector

要运行 Compat Inspector,你需要将下面这段代码写到每一个要测试的页面中的所有<script>标签之前:

<script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>

你也可以使用 Fiddler 自动将 Compat Inspector 注入到要测试的页面中,只要将这个代码片段(http://ie.microsoft.com/testdrive/HTML5/CompatInspector/help/snippet.txt)加入到你的Fiddler脚本(http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp)中就好了。之后你就可以在菜单栏的”Rules”菜单中启动和关闭 Compat Inspector 了,如下图所示:

1.jpg


请勿使用多线程下载工具下载论坛附件!

将上述的脚本添加好之后在 Internet Explorer 10 中打开你的页面,CompatInspector 就会立即开始分析这个页面。需要注意的是,一些运行时问题只有在代码运行过程中才能够被捕捉到,因此需要你手动触发这些不正常的交互过程来进行测试。

Compat Inspector 会按照错误(红色)、警告(黄色)和提示信息(蓝色)分别统计检测到的问题的总和,统计结果显示在页面的右上角:

2.jpg


请勿使用多线程下载工具下载论坛附件!

点击这个统计结果视图,你可以从展开的视图中获得每个问题的详细信息和相关文档:

3.jpg


请勿使用多线程下载工具下载论坛附件!

Compat Inspector 还为大多数的错误和警告提供“验证”和“调试”功能,以便对问题进行更精准的定位。


2. 验证

部分测试用例具有内置的“验证器”,可模拟遗留的行为(legacy behavior)。这让你在不修改任何代码的情况下就能够找出问题的根本原因。

前提:有错误或警告消息出现在 CompatInspector 的 Details 视图中,并且这些消息包含“Verify”复选框。

1)    勾选一个你想要验证的错误或警告的”Verify”复选框

4.jpg


请勿使用多线程下载工具下载论坛附件!

2)    刷新页面(你会在看到一个通知,提示你验证器已经被启用)

5.jpg


请勿使用多线程下载工具下载论坛附件!

3) 再次触发这个错误或警告

4) 如果同样的问题依然存在

o 如果仍然显示错误或警告消息,则使用其他消息重复步骤1-4;否则 Compat Inspector 无法确认这个问题,请访问 Internet Explorer 10 Guide for Developers(http://msdn.microsoft.com/library/hh673549.aspx)获取更多帮助信息。

5) 否则,你就已经找到了问题的根源所在

o 取消所有“Verify”复选框的勾选

6.jpg


请勿使用多线程下载工具下载论坛附件!

o 刷新页面

o 依照下面“调试”一节中叙述的步骤定位你代码中各条消息的来源

o 按照所显示的错误/警告消息中的说明解决该问题

3. 调试

Compat Inspector 还可以通过调试功能帮助你发现代码中的错误。

前提:有错误或警告消息出现在 CompatInspector 的Details 视图中,并且这些消息包含“Debug”复选框。

1)    勾选一个你想要调试的错误或警告的”Debug”复选框

7.jpg


请勿使用多线程下载工具下载论坛附件!

2)    按 F12 键打开开发者工具

8.jpg


请勿使用多线程下载工具下载论坛附件!

3)    切换到"Script"选项卡

9.jpg


请勿使用多线程下载工具下载论坛附件!

4)    点击"Startdebugging"

10.jpg


请勿使用多线程下载工具下载论坛附件!

5)    重复最初触发该错误或警告的步骤(这将调用脚本调试器)

11.jpg


请勿使用多线程下载工具下载论坛附件!

6)    切换到 F12 开发者工具右侧的”Call stack”子选项卡

12.jpg


请勿使用多线程下载工具下载论坛附件!

7)    在调用堆栈中,双击黄色箭头指向条目的下方条目

13.jpg


请勿使用多线程下载工具下载论坛附件!

8)    查看 F12 开发者工具左侧部分,检查触发错误或警告的代码段

14.jpg


请勿使用多线程下载工具下载论坛附件!

4. 鉴别Frames

许多网页都嵌入了 frame,有些来自于其他域名的网页。如果你使用 Fiddler 向frame 中注入Compat Inspector,它也能够发现 frame 中的问题,并产生相应的消息。Compat Inspector 会帮助你找出哪一个或哪些frame 触发了一个消息。只需要点击这个消息并且在”Details”视图中打开它,视图中就会显示出每一个触发该消息的frame。每个 frame 条目包含了该 frame 的 URL 以及“验证”和“调试”选项。使用这些选项你能够更准确地定位某个frame 中的问题。

15.jpg


请勿使用多线程下载工具下载论坛附件!

5. JavaScript

一个常见的问题是使用“过时”的JavaScript 库。Compat Inspector 使用两个步骤帮助发现由使用“过时”的JS 库所引发的问题。首先,它会检测并报告你所使用的库的版本,然后勾选”Verify”复选框将当前版本的库替换为最新版本。使用这个方法你就能够快速鉴别问题是否由使用“过时”的JS 库引起的。

16.jpg


请勿使用多线程下载工具下载论坛附件!

6. 最后的步骤

由于Compat Inspector 是一个测试工具,不能用在发布的产品当中,因此在发布你的网

站之前,要确保将Compat Inspector 脚本从所有页面中移除。

通过以上三个步骤,相信你已经了解了如何让你的网站兼容IE10并且解决兼容性问题,还可以通过一些测试工具来发现问题,后面我们可以来针对HTML5进行一些优化,更多内容可以参阅IE10兼容性白皮书,获得更多的帮助,下载地址:http://vdisk.weibo.com/s/bKgeq



2

查看全部评分

Rank: 7Rank: 7Rank: 7

UID
1057784
帖子
1200
PB币
993
贡献
0
技术
0
活跃
437

I'm Windows Phone用户 I'm Surface用户

发表于 2012-10-26 11:24:41 IP属地北京 |显示全部楼层
支持楼主的辛苦整理!

Rank: 5Rank: 5Rank: 5

UID
2998065
帖子
152
PB币
817
贡献
0
技术
0
活跃
21
发表于 2012-10-26 13:51:27 IP属地江苏 |显示全部楼层
alan0320 发表于 2012-10-26 11:24
支持楼主的辛苦整理!

感谢支持~

Rank: 5Rank: 5Rank: 5

UID
2998065
帖子
152
PB币
817
贡献
0
技术
0
活跃
21
发表于 2012-11-7 13:57:34 IP属地江苏 |显示全部楼层
第三弹看的人好少呀,冒昧顶起。

Rank: 1

UID
3100045
帖子
16
PB币
24
贡献
0
技术
0
活跃
10
发表于 2012-11-12 21:33:12 IP属地福建 |显示全部楼层
感谢分享啊!

UID
992009
帖子
3590
PB币
3276
贡献
0
技术
19
活跃
1113
发表于 2012-11-12 22:38:16 IP属地安徽 |显示全部楼层
E文,很难懂,搞网站的朋友用得上。

Rank: 1

UID
883502
帖子
76
PB币
18
贡献
0
技术
0
活跃
396
发表于 2012-11-13 10:04:27 IP属地台湾 |显示全部楼层
感谢分享啊!

愿得一人心 白首不分离.

Rank: 11Rank: 11Rank: 11

UID
2805600
帖子
10886
PB币
5536
贡献
0
技术
0
活跃
41

荣誉会员 应用界 8周年庆典勋章

发表于 2012-11-15 10:17:43 IP属地安徽 |显示全部楼层
前排支持.

那在我眼前的飘逸

Rank: 5Rank: 5Rank: 5

UID
2820899
帖子
462
PB币
1399
贡献
0
技术
0
活跃
169

7周年庆典勋章

发表于 2012-11-15 10:24:01 IP属地湖北 |显示全部楼层
支持啦,很用心的帖子

那在我眼前的飘逸

Rank: 5Rank: 5Rank: 5

UID
2820899
帖子
462
PB币
1399
贡献
0
技术
0
活跃
169

7周年庆典勋章

发表于 2012-11-15 10:24:48 IP属地湖北 |显示全部楼层
我ie10出现了兼容问题,就换成ie9模式下使用,也还好的说

Rank: 9

UID
1958594
帖子
1465
PB币
992
贡献
0
技术
0
活跃
20

荣誉会员 8周年庆典勋章

发表于 2012-11-15 17:25:17 IP属地江西 |显示全部楼层
谢谢楼主整理!多一个IE10,Web页面的兼容性就要多测试一个了TAT...

Rank: 1

UID
3166861
帖子
16
PB币
77
贡献
0
技术
0
活跃
10
发表于 2012-11-15 21:28:56 IP属地广东 |显示全部楼层
用谷歌路过

Rank: 2Rank: 2

UID
3146011
帖子
128
PB币
346
贡献
0
技术
0
活跃
133
发表于 2012-11-16 16:54:57 IP属地广西 |显示全部楼层
路过留用!!!!!!!

Rank: 1

UID
1347277
帖子
17
PB币
103
贡献
0
技术
0
活跃
10
发表于 2012-11-17 22:56:37 IP属地江苏 |显示全部楼层
必须要顶,大牛啊 !!!!

Rank: 1

UID
2388369
帖子
2
PB币
0
贡献
0
技术
0
活跃
2
发表于 2014-6-28 12:16:53 IP属地福建 |显示全部楼层
感谢分享喲....

Rank: 2Rank: 2

UID
601922
帖子
183
PB币
227
贡献
0
技术
0
活跃
131
发表于 2015-2-8 16:02:07 IP属地河北 |显示全部楼层
第三弹了,一路跟踪而来,三弹了,弹走鱼尾纹拉!!!
回顶部
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号  CDN加速及安全服务由「快御」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win11论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛