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

FF下没有问题

 

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

IE6下的问题

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

 

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

Xhtml代码:

 

 
  
  1. <div class="sidebar_wrap movie_listing"> 
  2.     <h3><a href="#">电影排期</a></h3> 
  3.     <dl> 
  4.         <dt class="movie_title"><a href="#">大兵小将</a></dt> 
  5.         <dd class="movie_pic"><a href="#"><img src="p_w_picpaths/movie_ad01.jpg" alt="大兵小将" width="73px" height="98px" /></a></dd> 
  6.         <dd class="movie_description">中国战国时代后期，各国统治者...</dd> 
  7.         <dd class="movie_link_more"><a href="#">剧情</a>&nbsp;&nbsp;<a href="#">影评(3)</a></dd> 
  8.         <dd class="movie_screening"><a href="#">16家影院放映&gt;&gt;</a></dd> 
  9.     </dl> 
  10. </div> 
 
  
CSS代码:
 
  
 
  
  1. #sidebar { float:right; width:200px; overflow:hidden; } 
  2. .sidebar_wrap { width:200px; } 
  3.     .sidebar_wrap h3 { width:200px; height:26px; line-height:26px; text-indent:1.5em; background:url(../p_w_picpaths/sidebar_titile.png) no-repeat; } 
  4.     .movie_listing dl { width:184px; margin:0px 8px; padding:10px 0px; border-bottom:1px solid #e4e4e4; overflow:hidden; } 
  5.     .movie_listing dl dt,.movie_listing dl dd { width:95px; float:right; line-height:185%; background:#666; } 
  6.     .movie_listing dl .movie_pic { width:81px; float:left; } 
  7.     .movie_listing dl .movie_pic a { display:block; padding:3px; border:1px solid #9a9a9c; } 
  8.     .movie_listing dl .movie_pic a img { width:73px; height:98px; } 
  9.     /* 下面是对影期方面的各个部分细节调整 */ 
  10.     .movie_listing dl dt { height:22px; } 
  11.     .movie_listing dl dt a { font-weight:bold; color:#333333; } 
  12.     .movie_listing dl .movie_link_more a { color:#0099cc; } 
  13.     .movie_listing dl .movie_screening a { color:#ff6633; } 
  14.     .movie_listing dl:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
 
  
注意：上面的CSS代码在使用之前，自己要对整个页面的元素进行reset才行，要不然就没有自己想象的效果了，如果不知道哪有css reset代码的，请点击这里