IE 3px bug & display problem

类似用户评论的需求，最终效果如图。


用定义列表写的结构代码。

<dl class="list">
  <dt><img src="images/none.gif" /></dt>
  <dd>
    <h6>yersinia:</h6>
    <p>i've seen it before, but you make it look appealingly strange.</p>
    <div>07-18-2006 00:04 / 61.49.237.33 edit / delete</div>
  </dd>
</dl>

最简单的思路，采用左float右margin。

.list dt { float:left; margin:0 10px 0 0;}
.list dd { margin:0 0 0 62px;}

在有背景色时能明显看到IE下古老的3px bug，注意是在dd内部而不是外边（上图IE6.0、下图FF1.5，以下同）。


用display:inline-block将对象呈递为内联对象来解决dd的问题，同时用margin在IE下少定义三个象素，能保证视觉上的一致。

.list dt { float:left; margin:0 10px 0 0;}
.list dd { margin:0 0 0 62px;}
*html .list dd { display:inline-block; margin:0 0 0 59px;}

但这个方案不完美，因为需求中“头像”功能是可定制的，如果头像容器dt没有输出，或者display:none，那么在dd左边会有margin值，不能自动延伸，最好的方案是考虑定义dt来解决头像的容器的问题。

先尝试通过dt来解决IE的3px bug。

.list dt { float:left; margin:0 10px 0 0;}
*html .list dt { margin:0 7px 0 0;}
*html .list dd { display:inline-block;}

在FF下会出现浮动问题。


用display:table将对象作为块元素级的表格显示来清除dd的浮动，同时用margin取消继承居中并且靠左。

.list dt { float:left; margin:0 10px 0 0;}
.list dd { display:table; margin:0 auto 0 0;}
*html .list dt { margin:0 7px 0 0;}
*html .list dd { display:inline-block;}

完成需求。内容少的例子，在有背景色的情况下，才能看到IE和FF的效果区别。


demo http://www.rexsong.com/blog/attachments/200607/31_192639_ie_3px_bug__display_problem.htm