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有作用 ,在Firefoxdd表现出来的左边还是有空白的地方,最后发现,原来是ulFirefox中的marginpadding有预设值,在CSS中加上padding:0 问题解决,IEFirefox表现基本一致。

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

补充: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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值