dl末设置宽度导致dt、dd上下之间有10px的间距

原创

Mrchenx 2010-03-14 10:37:14 博主文章分类：css样式之美 ©著作权

文章标签 职场设置休闲宽度 dl dt dd 间距 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者Mrchenx的原创作品，请联系作者获取转载授权，否则将追究法律责任

今天在写一个”电影排期”的列表的时候，自己先将父类div设置好了宽度，再在里面写多个解释性的标签dl来排版，但当我将所有的样式都设置好以后，在Firefox、谷歌浏览器里面浏览的时候，完全没有问题。效果如下：

但在IE6里面出现了一个比较大的差距：dt、dd上下之间有10px的差距。效果如下：

注意：之所以有灰色的背景，是因为自己在调试时好看清楚哪里有问题！不要见怪！

自己为IE6测试了好几个hack写法，都不行。后来查看了以前做的东西，发现dl里面没有设置width，本来以为块元素它是占满父类元素的宽度的100%，所以没有设置宽度，现在看来错了，哎…….在此记下:

Xhtml代码:

<div class="sidebar_wrap movie_listing"> 
    <h3><a href="#">电影排期</a></h3> 
    <dl> 
        <dt class="movie_title"><a href="#">大兵小将</a></dt> 
        <dd class="movie_pic"><a href="#"><img src="p_w_picpaths/movie_ad01.jpg" alt="大兵小将" width="73px" height="98px" /></a></dd> 
        <dd class="movie_description">中国战国时代后期，各国统治者...</dd> 
        <dd class="movie_link_more"><a href="#">剧情</a>&nbsp;&nbsp;<a href="#">影评(3)</a></dd> 
        <dd class="movie_screening"><a href="#">16家影院放映&gt;&gt;</a></dd> 
    </dl> 
</div>

CSS代码:

#sidebar { float:right; width:200px; overflow:hidden; } 
.sidebar_wrap { width:200px; } 
    .sidebar_wrap h3 { width:200px; height:26px; line-height:26px; text-indent:1.5em; background:url(../p_w_picpaths/sidebar_titile.png) no-repeat; } 
    .movie_listing dl { width:184px; margin:0px 8px; padding:10px 0px; border-bottom:1px solid #e4e4e4; overflow:hidden; } 
    .movie_listing dl dt,.movie_listing dl dd { width:95px; float:right; line-height:185%; background:#666; } 
    .movie_listing dl .movie_pic { width:81px; float:left; } 
    .movie_listing dl .movie_pic a { display:block; padding:3px; border:1px solid #9a9a9c; } 
    .movie_listing dl .movie_pic a img { width:73px; height:98px; } 
    /* 下面是对影期方面的各个部分细节调整 */ 
    .movie_listing dl dt { height:22px; } 
    .movie_listing dl dt a { font-weight:bold; color:#333333; } 
    .movie_listing dl .movie_link_more a { color:#0099cc; } 
    .movie_listing dl .movie_screening a { color:#ff6633; } 
    .movie_listing dl:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }