IE6之前盒装模型Bug解决办法!

先温习一下对于IE的box-model的破解
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转
但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model
所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作

div.content {
<!--ubbcodetab--><!--/ubbcodetab-->width:400px;<!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab-->//这个是错误的width,所有浏览器都读到了
<!--ubbcodetab--><!--/ubbcodetab-->voice-family: "\"}\"";<!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab-->//IE5.X/win忽略了"\"}\""后的内容
<!--ubbcodetab--><!--/ubbcodetab-->voice-family:inherit;
<!--ubbcodetab--><!--/ubbcodetab-->width:300px;<!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab-->//包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body .content {<!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab-->//html>body是CSS2的写法
<!--ubbcodetab--><!--/ubbcodetab-->width:300px;<!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab--><!--ubbcodetab--><!--/ubbcodetab-->//支持CSS2该写法的浏览器有幸读到了这一句
}

你可能感兴趣的:(html,工作,浏览器,css,IE)