<dt><img src="http://file.wbgxw.com/UpLoadPic/2007-4">

IE 3px bug & display problem

80酷酷网    80kuku.com

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


用定义列表写的结构代码。
<dl class="list">
  <dt><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741142338770.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


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击:4