标准参考
根据 W3C HTML 4.01 规范中对HTML中的列表元素进行了详细的描述，其中将列表分为三类：
- 无序信息列表，使用 UL 元素创建，列表项由 LI 元素构成；
- 有序信息列表，使用 OL 元素创建，列表项由 LI 元素构成；
- 定义列表，使用 DL 元素创建，通常由一系列的 "项/定义" 对（term/definition pairs）组成，即 DT 元素和 DD 元素。
任何列表必须包含一个或多个列表元素。
关于列表的详细信息，请参考 HTML 4.01 规范 10 Lists 中的内容。
问题描述
IE6 IE7 IE8(Q) 会忽略 LI DD DT 元素的结束标记，并且位于同一个父元素内的 LI 元素在文档树中会前后相连，位于 LI 元素之后的元素1会被修复到其前面最近的 LI DD DT 元素内，成为该 LI DD DT 元素的子元素。
造成的影响
对 LI DD DT 元素之后出现的非列表元素处理在不同浏览器中导致布局上的差异。
受影响的浏览器
问题分析
根据 HTML4.01 规范可知，LI DD DT 元素只应存在于其对应的 UL OL DL 元素中，而由 UL OL DL 元素创建的列表从 HTML 规范的定义上说不应该包含具有其他意义的非列表元素 ('display' 不为 'list-item' )，但在实际中，经常会碰到诸如 DIV SPAN 甚至文本内容被放置在 LI 元素之后。
分析以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0; padding:0; }
li { list-style-type:none; }
</style>
</head>
<body>
<div style="width:200px;">
<li>li A</li>
<li style="border:1px solid black;">li B</li>
<span style="background:gray;">CCC</span>
<li>li C</li>
</div>
<br />
<div style="width:200px;">
<dd>dd A</dd>
<dd style="border:1px solid black;">dd B</dd>
<span style="background:gray;">CCC</span>
<dd>dd C</dd>
</div>
<br />
<div style="width:200px;">
<dt>dt A</dt>
<dt style="border:1px solid black;">dt B</dt>
<span style="background:gray;">CCC</span>
<dt>dt C</dt>
</div>
</body>
</html>
[此贴子已经被作者于2015-2-10 17:06:52编辑过]
加好友 
发短信
Post By：2015/2/10 17:04:28 [显示全部帖子]
