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

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

代码

<dl>
    <dt>总管dt</dt>
    <div class="box">
          <dd>小兵ddA</dd>
          <dd>小兵ddB</dd>
    </div>
</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了~

<dl>
    <div><dt>总管dt</dt></div>
    <div class="box">
          <dd>小兵ddA</dd>
          <dd>小兵ddB</dd>
     </div>
</dl> 

 ie6、7效果图：

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