匿名投稿
投稿指南
RSS订阅七、Box Model 盒模型bug的一般解决办法
我们定义一个最基本的层boxtest：
#boxtest{ border:20px solid #60A179; padding: 30px; background : #ffc; width : 400px; } |
标准情况下，这个盒的宽度是:20+30+300+30+20=400px。
但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。
为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。
#boxtest{ border:20px solid #60A179;; padding:30px; background: #ffc; width :400px; voice-family : "\"}\""; voice-family :inherit; width : 300px; } |
同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }
八、两个层之间的3px间隙
这个问题普遍的困扰着新手朋友，不知道如何是好，想不出办法进行解决。其实这就是传说中的“IE 3px bug”。解决的办法也比较简单。请看下面的示例说明。
IE中两个层之间的间隙（IE 3px bug）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>52css.com</title> <style type="text/css"> <!-- #left { float:left; width:200px; height:100px; background:#f00; } #right { width:200px; height:100px; background:#fc0; } --> </style> </head> <body> <div id="left">52css.com</div> <div id="right">52css.com</div> </body> </html> |