#扒扒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已不存在这种现象了）

转载于:https://www.cnblogs.com/isuyi/p/3196878.html