大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > 深入理解浏览器兼容性模式

深入理解浏览器兼容性模式(1)

关键词:浏览器兼容性模式  阅读(1630) 赞(55)

[摘要]本文主要介绍浏览器兼容问题,在开发网站时掌握浏览器兼容模型对网站设计及兼容性将有很大改善,与大家分享。

想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个“准标准(Almost Standards)”模式。而当你打开Internet Explorer的时候,又看到了什么浏览器模式、文档模式,还有什么兼容性视图等等...

这些都是什么?啥是浏览器模式,啥是文档模式?标准模式和准标准的模式有什么区别?IE9兼容性视图和真正的IE9有什么区别?什么情况下会触发这些模式,又该怎样才能检测到浏览器当前处于哪种模式中呢?本文将详细为你解答这些疑问。

三种模式

首先我们要知道,为什么会有这么多模式。其实这是个历史遗留问题,在浏览器大战时期,网景浏览器(Netscape Navigator)和微软的IE浏览器(Microsoft Internet Explorer)对网页分别有不同的实现方式,那个时候的网页要针对这两种浏览器分别开发不同的版本。而到了W3C制定标准之后,这些浏览器就不能继续使用这种页面了,因而会导致大部分现有站点都不能使用。基于这个原因,浏览器才引入两种模式来处理一些遗留的站点。

现在的浏览器排版引擎支持三种模式:怪异(Quirks)模式、准标准(Almost Standards)和标准(Standards)模式。在怪异模式中,排版引擎会模拟 网景4和Windows中的IE5的行为;在完全标准的模式中,会尽量执行HTML和CSS规范所指定的行为;而在准标准模式中,则只包含很少的一部分怪异模式中的行为。

那么所谓标准模式,就一定都“标准”吗?答案当然是否定的,因为各个浏览器厂商实现标准的阶段不同,所以各个浏览器的“标准模式”之间也会有很大的不同。

Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准,准标准的模式肯定就更不标准了。最初的准标准模式只会影响表格中的图像,而后来各个浏览器又或多或少地进行了修改。那么什么情况下会触发准标准模式呢?是的,正如你所想到的,某些DOCTYPE会触发准标准模式,例如:

"-//W3C//DTD XHTML 1.0 Transitional//EN"  
"-//W3C//DTD XHTML 1.0 Frameset//EN"  
"-//W3C//DTD HTML 4.01 Transitional//EN"  
"-//W3C//DTD HTML 4.01 Frameset//EN"  
"http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" 

一个完整的 DOCTYPE 例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                      "http://www.w3.org/TR/html4/loose.dtd">

如果在Firefox中插入这种DOCTYPE,并在页面中插入一个空的span标签,那么在Firebug中查看元素的布局就会发现不同:

准标准模式中元素的line-height被忽略了,元素既没有宽度也没有高度:

标准模式中元素仍然保留了line-height,拥有18px的高度:

在Firefox浏览器中,使用鼠标右键->查看页面信息 可以看到当前浏览器运行在何种模式(只能看到“混杂模式”和“标准规范模式”两种表示):

有位大神Henri Sivonen曾写过一篇文章叫做Activating Browser Modes with Doctype,里面包含了一个完整的表格,展示了各种DOCTYPE设置将会使浏览器以何种方式渲染。这里还有一篇秦歌的译文《用doctype激活浏览器模式》。

鉴于目前一些最新版本的浏览器已经放弃了准标准模式,所以关于准标准模式的细节这里就不再赘述了,感兴趣的同学可以详细阅读以下资料:

那么,既然这么多的DOCTYPE都会触发非标准的模式,那么如何才能触发标准模式呢?对了!要使用HTML5 DOCTYPE,即:

<!DOCTYPE html>

注意:如果文档中没有包含DOCTYPE或者包含了一个无法识别的DOCTYPE,则浏览器就会进入怪异模式。

下面简单说一下怪异模式。怪异模式有许多“怪异”的行为,主要是为了兼容那些遗留的古老页面而保留的模式。不同浏览器的怪异模式也不尽相同,它们都有自己的实现方式。怪异模式与标准模式的差异主要体现在 盒模型(box model)、表格单元格高度的处理等。例如IE的怪异模式中,元素的width包含了padding和border,而标准模式中padding和border 并不属于宽度的一部分。

若想详细了解浏览器在怪异模式下的行为,可以参看下面两篇文章。不过不建议在这上面花太多的精力,这是个历史遗留问题,而且我们也尽量保证新开发的页面不要进入到怪异模式:

Mozilla Quirks Mode Behavior

What happens in Quirks Mode?

Compatability Mode Test

小结:至此我们需要了解,浏览器有三种运行模式,即标准模式、准标准模式和怪异模式,要使用 <!DOCTYPE html> 来正确地触发标准模式。千万不要丢掉DOCTYPE声明,因为这会导致浏览器进入怪异模式。

«上一页123下一页»


相关评论