手头的一个项目中使用了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> <a href="#">影评(3)</a></dd> <dd class="movie_screening"><a href="#">16家影院放映>></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