您的位置:首页 > 产品设计 > UI/UE

Quirks模式与Standards模式

2014-05-12 12:44 260 查看


Quirks模式与Standards模式

十月 31st, 2008 Posted in 前端开发&架构By
lujo Tags: 浏览器


如何进入Standards模式?

一般来讲浏览器是通过DTD来判断模式的;浏览器进入Standards模式的DTD有:HTML的strict.dtd和loose.dtd这两个DTD的简单区别是
strict去掉了许多表现的标签,有利于结构和表现的分离
loose会导致Firefox进入Almost Standards模式,在图片的处理上会有微小的差别
在IE6下,如果在DTD之前有任何字符都将导致其进入quirks模式




Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题可以设置行内元素的高宽在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效可设置百分比的高度在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中在IE下会失效使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:
body{text-align:center};#{content:text-align:left}

设置图片的padding会失效Table中的字体属性不能继承上层的设置white-space: pre会失效许多CSS默认样式将不同在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效JavaScript中的区别Quirks mode的Table of measurements

参考

Table of measurements
MSDN
dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat,分别对应quirks mode和strict mode
void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: