解决IE7下在DD DT中插入a元素导结果列表显示逐级向左

(编辑:jimmy 日期: 2025/2/27 浏览:2)

今天在项目中遇到了一个奇怪的BUG,在DD,DT之间加了个<a>标签,结果列表显示逐级向左,样式跑偏,代码如下

复制代码代码如下:
<dt></dt>
<a><dd></dd>
<a><dd></dd>

将<a>标签删除后,显示正常,后来在网上查了一下,可能的原因是:

根据 HTML4.01 规范可知,LI DD DT 元素只应存在于其对应的 UL OL DL 元素中,而由 UL OL DL 元素创建的列表从 HTML 规范的定义上说不应该包含具有其他意义的非列表元素 ('display' 不为 'list-item' ),但在实际中,经常会碰到诸如 DIV SPAN 甚至文本内容被放置在 LI 元素之后。

这个现象,与 LI DT DD 元素之后插入的非列表元素类型无关,也与包含 LI DD DT 元素的类型无关。从获取到的浏览器解析后的 HTML 代码可以看出IE6 IE7 IE8(Q) 会忽略 LI DD DT 元素的结束标记,并且位于同一个父元素内的 LI 元素在文档树中会前后相连。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。