#扒扒ie6#列表元素li dt dd包含非列表父元素/弟元素时,页面面目全非

本周遇到一个奇怪的问题,当然知道的同学早就见怪不怪啦。

代码

1 <dl>
2     <dt>总管dt</dt>
3     <div class="box">
4           <dd>小兵ddA</dd>
5           <dd>小兵ddB</dd>
6     </div>
7 </dl>                    

现象

在ie6、7的开发者工具里可以看到,这段html被修复成了如下图,可以看到,dt、dd元素的元素都被归入dt、dd的麾下,也就是说ie6、7下会忽略dt、dd、li的结束标志,这样会导致严重的页面错乱。

ie6、7 ie8、9、10以及chrome、firefox

 

 

 

 

 

 

 

 

 

解决方法

虽然html4规范没有指出这样写不对,基于语义化的原则,最好不要在li、dt、dd的父元素或弟元素写非列表元素。但是总归有万不得已的时候啊,提供一个小方法,代码如下,就是在每层dt、dd、li外面包一层div,就ok了~

1 <dl>
2     <div><dt>总管dt</dt></div>
3     <div class="box">
4           <dd>小兵ddA</dd>
5           <dd>小兵ddB</dd>
6      </div>
7 </dl> 

 ie6、7效果图:

参考文章:http://w3help.org/zh-cn/causes/HY1005纠正:ie8已不存在这种现象了

posted @ 2013-07-17 21:22  iamsuyi  阅读(195)  评论(0编辑  收藏  举报