使用hack解决IE5容器width解析bug

原文: http://www.planabc.net/article.asp?id=10

IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin

IE5.X
真实宽度=width-padding-border+margin

方法1:

div.content {
width:430px; //这个是错误的width(对于ie5来说是正确的),所有浏览器都读到了
voice-family: “”}””; //IE5.X/win忽略了””}””后的内容
voice-family:inherit;
width:400px; //包括IE6/win在内的部分浏览器读到这句,新的数值(400px)覆盖掉了旧的
}

html>body .content { //html>body是CSS2的写法
width:400px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

方法2:

div.content {
width:400px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:430px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是400px;而IE5.X/win读到这句,新的数值(430px)覆盖掉了旧的,因为!important标记对他们不起作用
}

html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

方法3:

div.content {
width:430px; /*所有浏览器识别这个宽度,包括WIN IE5.5 IE5 IE4 NS4 Opera 5*/
width:400px; /*WIN IE5.5 IE5 IE4 NS4 Opera 5不识别,其他的认为这是个正确的值*/
}

html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

方法4:

<!–[if Lte IE5]>
#content {
width:530px
}
<[!endif]–>

这里是一个width:400px;margin:10px;padding:10px; border:10px;的一个盒子,IE5.x Win解析不正常。

IE6盒模型在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。

相关文章

发表评论

返回顶部