firefox的dl dt dd布局Hack

手头的一个项目中使用了dl dt dd模拟表格布局，在Chrome中一切看起来很完美，结果到IE和firefox中就完全面目全非。现总结如下：

HTML结构如下：

<div id="banner">
    <img src="images/banner2.png" />
    <dl>
         <dd>$445<br/><span class="banner-text">Full Economy Set</span></dd>
         <dd>$65<br/><span class="banner-text">Routine Tooth Extraction</span></dd>
         <dd>$95<br/><span class="banner-text">Complex Tooth Extraction</span></dd>
    </dl>
    <strong>CALL US TODAY: 999-999-9999</strong>        
</div><!--banner end-->

CSS

#banner dl{position: absolute;bottom: 95px;left: 92px;font-size: 3em;color: #fff;line-height: 1;text-shadow: #bbb 1px 1px 1px;}
#banner dl dd{float: left;padding-right: 0.2em;text-align: center;border-left: 1px solid #aaa;white-space: normal;width: 135px;}
#banner dl dd:first-child{border-left: 0px solid #aaa;}
.banner-text{font-size:0.3em;line-height: 1.3;}

在chrome中的效果：

在IE和Firefox中的效果：

问题1：文字在IE和Firefox中被截去头部，数字部分不完整

解决：  给dl加上height属性，最好加上width属性

问题2：整个dl在IE和Firefox中全部向上偏移严重

解决：给dl加上width属性

问题3：span中的文字强制换行后，间距过大

解决：给span加上 display：block；

最后的CSS代码：

#banner dl{position: absolute;bottom: 95px;left: 92px;width: 450px;height: 82px;font-size: 3em;color: #fff;line-height: 1;
text-shadow: #bbb 1px 1px 1px;}
/*dl必须给出高度值，避免IE和Firefox中最大字体的文本头部被消去，并且给出宽度，避免IE和Firefox中整个dl上移*/
#banner dl dd{float: left;padding-right: 0.2em;text-align: center;border-left: 1px solid #aaa;white-space: normal;/*强制换行*/width: 135px;overflow: visible;} /**/ #banner dl dd:first-child{border-left: 0px solid #aaa;} .banner-text{font-size:0.3em;line-height: 1.3;height: 35px;display:block;} /*解决span层强制换行后，字体间距过大，使之变为block块*/

=========================================

当使用dl dt dd布局时，出来的效果在IE中和firefox中不同，在ul中使用margin:0 只对IE有作用 ，在Firefox中dd表现出来的左边还是有空白的地方，最后发现，原来是ul在Firefox中的margin和padding有预设值，在CSS中加上padding:0 问题解决，IE和Firefox表现基本一致。

=========================================

补充：dl dt dd样式设置要点

1.指定dl的height——否则ie7会默认设置，高度明显高于firefox中的值

2.指定dt和dd的margin和padding属性——浏览器的默认值不同，显示会有差别，一般在reset.css中解决该问题

3.dt和dd的内容需要在同一行显示时，需设置dt的float:left属性

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

dl里面没有设置width，本来以为块元素它是占满父类元素的宽度的100%，所以没有设置宽度，现在看来错了，哎…….在此记下:

<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="images/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(../images/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; } 

 

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/02/12/2910208.html