2007-03-22

在 ff 下 margin-top 翻倍的假象

关键字: margin-top，ff
今天在调页面时发现一个margin的问题在IE和FF下始终没能解决，于是便单独拿出来试验，最终知道问题所在啦

css 代码
 
  1. *{padding:0; margin:0;}  
  2. div.contain img {  
  3.     float: left;  
  4.     margin: 15px 10px auto 15px;  
  5.     width: 45px;  
  6.     height: 45px;  
  7.     display:inline-block;//解决IE下的双边距  
  8. }  
  9. div.contain dl {  
  10.     margin: 15px 10px 15px 0;  
  11.     line-height: 1.3em;  
  12. }  
  13. div.contain dt {  
  14.     font-size: 1.3em;  
  15.     font-weight: bold;  
  16.     color: #000;  
  17. }  
  18. div.contain dd {  
  19.     font-size: 1.2em;  
  20.     font-weight: normal;  
  21.     color: #CDC2A1;  
  22. }  
  23. .hackbox{ clear:both;//解决ff下的自适应}  
xml 代码
 
  1. <div class="contain"> 
  2.     <img src="images/logo/logo_sj.gif" alt="logo icon" />
  3.     <dl>  
  4.         <dt>Passion</dt>  
  5.         <dd>Designer / Developer</dd>  
  6.     </dl>  
  7.     <div class="hackbox"></div>  
  8. </div>  
现象：在ff 下 img 的 margin-top 看上去是30px.
原因：因为ff下对 dl 的解析的级数比img高，所以在同一个 div下，先根据dl的 margin-top 解析为15px ，而后又再加上img自身            的15px，就得出了我们 所看到 的 30px啦！
             这一现象在IE下不存在，也许是IE对img和dl的解析级数一样吧！
评论
发表评论

您还没有登录，请登录后发表评论

tiger.passion
搜索本博客
我的相册
636a5d3f-1fce-3bb9-89d8-b13e5c6318d4-thumb
w3c01
共 46 张
存档
最新评论