本文主要是介绍在 ff 下 margin-top 翻倍的假象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天在调页面时发现一个margin的问题在IE和FF下始终没能解决，于是便单独拿出来试验，最终知道问题所在啦
css 代码
css 代码
- *{padding:0; margin:0;}
- div.contain img {
- float: left;
- margin: 15px 10px auto 15px;
- width: 45px;
- height: 45px;
- display:inline-block;//解决IE下的双边距
- }
- div.contain dl {
- margin: 15px 10px 15px 0;
- line-height: 1.3em;
- }
- div.contain dt {
- font-size: 1.3em;
- font-weight: bold;
- color: #000;
- }
- div.contain dd {
- font-size: 1.2em;
- font-weight: normal;
- color: #CDC2A1;
- }
- .hackbox{ clear:both;//解决ff下的自适应}
xml 代码
- <div class="contain">
- <img src="images/logo/logo_sj.gif" alt="logo icon" />
- <dl>
- <dt>Passion</dt>
- <dd>Designer / Developer</dd>
- </dl>
- <div class="hackbox"></div>
- </div>
原因：因为ff下对 dl 的解析的级数比img高，所以在同一个 div下，先根据dl的 margin-top 解析为15px ，而后又再加上img自身 的15px，就得出了我们 所看到 的 30px啦！
这一现象在IE下不存在，也许是IE对img和dl的解析级数一样吧！
这篇关于在 ff 下 margin-top 翻倍的假象的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
