`
t225com
  • 浏览: 662112 次
文章分类
社区版块
存档分类
最新评论

如何更新Web标准下的docmode

阅读更多

作者简介:

Rey Bango,作为Microsoft的一个技术传播者,一直致力于推进客户端Web开发的实践经验,并帮助Microsoft满足社区需求。他对于HTML5可能带来的丰富的交互的Web应用有着极大的热情。同时,Rey也是jQuery JavaScript项目小组的成员之一,以及.net杂志的作者。

文档兼容性定义了一个浏览器是如何展现你的网站的。你把你的期待对浏览器告知得越详细,你的用户就能有越好的体验。当使用如HTML5这样的Web标准的时候,要显式声明HTML5的文档类型:

<!DOCTYPE html>

这个标记将触发IE9和IE10中的标准模式(standards mode)。它在Chrome和Firefox中也工作得非常好。以下四步将带领你让你的站点能在各种浏览器以及设备上展现:

Step 1:确认你的站点使用的是标准模式

检查你的站点现在是否使用的是标准模式:

1.在IE10 platform preview打开网站。

注意:你可以使用同样的步骤来更新IE9中的docmode,而不用下载IE10的尝鲜版。

2.按F12来启动IE Developer Tools或者如下所示在工具栏菜单中找到它:


注意:如果你对使用IE F12 Developer Tools来调试你的网页还不熟悉,请读下面的指南

检查你的站点是否显示Browser Mode: IE10 和Document Mode: IE10 Standards,如下面的工具栏所示:


如果你的站点是处于Browser Mode: IE10 和Document Mode: IE10 Standards的状态,那么,你已经完成了。注意你的站点的Browser Mode 和Document Mode和上述不同情况。一种常见的例子是Browser Mode = IE8Document Mode = Quirks,这意味着你的站点是为老版本的IE设计的,并且可能不符合Web标准。


Step 2:实现Web标准下的docmode

强制使用IE10 standards mode来测试你的网站:

  1. 在你的站点的HTML页面中插入<!DOCTYPE html>。你可以在这里学到如何更新你的doctypes。
  2. 在浏览器中重新加载你的页面并再一次使用F12 Developer Tools来检查Browser Mode 和 Document Mode。如果正确显示出Browser Mode: IE10 和 Document Mode: IE10 Standards,那么,继续下面的步骤。

Step 3:确认为什么你的站点不是在标准模式下

很多问题都是和支持老版本的IE相关的。要确保你的基于标准的代码是IE9和IE10提供的。然后保留你的非标准的代码支持老版本的IE即可。

1. 我的页面不是Browser Mode: IE10

可能的原因:你的页面是处于兼容性视图(Compatibility View)中,并未了确保站点功能而处于一个老的浏览器模式中。
解决方案:检查一下你的站点是否在这个单子上。你可以在这里学到更多关于兼容性视图清单的内容并请求移除。

2. 我的页面不是Document Mode = IE10

可能的原因:你的网站的 doctype 是无效的或者缺失的。
Resolution:检查一下你是否有有效的、格式正确的doctye,如下所示:

<!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/xhtml1/DTD/xhtml1-strict.dtd">

你可以在这里学到如何更新你的 doctypes。

可能的原因:Docmode 中有X-UA-Compatible meta tag.
解决方案:检查页面中是否有这样的代码。去掉它并重新加载页面。继续测试。你可以在这里了解到更多关于指定文档兼容性模式(Specifying Document Compatibility Modes)的内容。

Step 4:当更新docmode的时候解决常见的一些IE问题

很多问题都是和支持老版本的IE相关的。要确保你的基于标准的代码是IE9和IE10提供的。然后保留你的非标准的代码支持老版本的IE即可。

可能的原因:Conditional comments支持不同版本浏览器相关的特性。

(译者注:如果你的web站点或应用程序是供给不同的浏览器用户使用的,那么你可能就需要使用到CSS Hack和CSS Conditional Comments,CSS Conditional Comments是给不同的浏览器加载不同的CSS文件。)
解决方案:检查运行非标准代码的conditional comments。这些通常是用来支持老版本的IE的某些特性,以便让页面可以适应老版本的IE。检查是否有类似于下面的代码:

<!--[if IE 8]>

<p>Welcome to Internet Explorer 8.</p>

< ![endif]-->

去掉它并重新加载页面。继续测试。你可以在这里了解到更多关于Conditional Comments的内容。

可能的原因:用户代理嗅探(User agent sniffing)支持浏览器版本相关的特性。 ​
解决方案:检查user agent sniffing。这通常是使用user agent string来定位一个浏览器的。

(译者注:User Agent (UA) 字符串,是客户端浏览器等应用程序使用的一种特殊的网络协议,在每次浏览器(邮件客户端/搜索引擎蜘蛛)进行 HTTP 请求时发送到服务器,服务器就知道了用户是使用什么浏览器(邮件客户端/搜索引擎蜘蛛)来访问的。)

检查是否有类似于下面的代码:

if (version = /MSIE (\d+\.\d+)/.exec(navigator.userAgent)) {

​isIE = true;

browserVersion = parseFloat(version[1]);

}

你可以使用Web标准来实现特征检测(feature detection)。你可以在这里了解到更多关于User-Agent Strings的内容。IE10 的User-Agent String是在这里

其他一些页面不能正常显示的原因

可能的原因:你的站点可能使用了特定浏览器相关的特性。请尽可能使用Web标准。
解决方案:运行兼容性检测工具(Compatibility Inspector tool)。

可能的原因:第的站点可能使用了第三方插件,比如Flash, Quicktime和Silverlight,而这些是不被IE10 metro支持的。请使用Web标准。

解决方案:学习如何创建不使用插件的应用。一个完整的新手教程将很快出现。

可能的原因:你的站点可能加载了与特点浏览器相关的CSS文件。
解决方案:请确保你的布局尽可能避免使用CSS hacks。你可以在这里了解到更多关于CSS是议题。

你可以在IE Compatibility Cookbook看到常见问题清单。

如果你通过以上解决方案还不能够更新你的docmode,tweet us @IE或者查阅MSDN的论坛。

想要了解更多细节,可以阅读以下文章:
Defining Document Capability@ MSDN
Investigating Document Mode Issues@ MSDN
Interoperable Quirks Modein IE10 @ IE Blog
Compatibility Inspector tool@ IETestDrive.com
Don’t Forget to Add a Doctype@ W3C.org

原文链接:Update Your docmode for Web Standards


译文来源:http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客,关注WebApp前瞻和实践,以及智能浏览器发展

请大家在关注CSDN的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的:193775364

分享到:
评论

相关推荐

    Web标准设计.pdf

    试阅版不全,希望有全的... 虽然《Web标准设计》讲述的内容是Web标准,但由于页数有限,《Web标准设计》无法让你精通Web标准所有的知识点,我选择的重点是XHTML+CSS,其他的方面只能说让你达到了解、掌握基础的地步。

    《基于Web标准的网页设计》教学课件02Web标准及其构成.pdf

    《基于Web标准的网页设计》教学课件02Web标准及其构成.pdf《基于Web标准的网页设计》教学课件02Web标准及其构成.pdf《基于Web标准的网页设计》教学课件02Web标准及其构成.pdf《基于Web标准的网页设计》教学课件02Web...

    web标准初探(主要介绍web标准)

    简要介绍了WEB 标准的概念及它的主导思想———内容与表现形式; 也谈及了使用WEB 标准制作网站的目的和风站采用网站标准 对浏览者和所有者的益处; 还有使用WEB 标准制作网站应注意的常用规则; 最后通过一个网站制作...

    网站重构&Web标准设计第二版.pptx

    网站重构 web标准设计参考 网站重构 web标准设计参考

    web标准与网站重构

    web标准与网站重构,web标准与网站重构web标准与网站重构web标准与网站重构web标准与网站重构

    WEB标准设计 pdf

    介绍WEB标准 通俗易懂 pdf文档 是学习制作符合W3C标准网页的好资料

    精通CSS:高级Web标准解决方案.pdf

    精通CSS:高级Web标准解决方案.pdf

    智能手机Web标准开发实战PDF(完整版)

    智能手机Web标准开发实战:为iPhone、Android、Palm Pre、BlackBerry、Windows Mobile及Nokia S60开发通用的基于Javascript、CSS、HTML和Ajax的Web应用(移动与嵌入式开发技术) 好书籍不多介绍,网上介绍一大堆

    精通CSS高级Web标准解决方案PDF扫描高清版

    《精通CSS:高级Web标准解决方案》是2010年人民邮电出版社出版的图书,作者是(英)巴德、科利森、莫尔。

    十天学会DIV+CSS(WEB标准)

    十天学会DIV+CSS(WEB标准),十天学会DIV+CSS(WEB标准),十天学会DIV+CSS(WEB标准),十天学会DIV+CSS(WEB标准),十天学会DIV+CSS(WEB标准),十天学会DIV+CSS(WEB标准)

    web标准化学习指南:如何学习网页标准

    web标准化学习指南:如何学习网页标准 如何学习网页标准 很多经典论坛网页标准化版的版友问这个问题,我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结。

    网站重构.Web标准设计

    网站重构Web标准设计 ppt 精品资源

    WEB标准和网站重构

    这是一本关于WEB标准方面的指导性丛书,帮助规范WEB设计标准.

    十天学会web标准

    web标准(css+div)学习参考,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面

    web标准之道

    《Web标准之道:博客园精华集》并不是一本由代码和技巧堆积而成的集合,更多的是探讨了Web设计中若干理念和心得,其中多为经验之谈。无论对于从事Web前端设计的人士,还是对于那些从事Web后端编程的技术人员,《Web...

    WEB标准与网站重构

    WEB标准与网站重构 WEB设计可以看下

    Web标准设计 pdf速递

    Web标准设计 感觉还不错,放上来,有钱的去买正版哦!

    WEB标准与网站重构(PDF)

    介绍WEB标准、解释XHTML、XML、CSS等常用词及一些常用的相关知识介绍

    《基于Web标准的网页设计》实训指导书06交互页面的设计与制作.pdf

    《基于Web标准的网页设计》实训指导书06交互页面的设计与制作.pdf《基于Web标准的网页设计》实训指导书06交互页面的设计与制作.pdf《基于Web标准的网页设计》实训指导书06交互页面的设计与制作.pdf《基于Web标准的...

Global site tag (gtag.js) - Google Analytics