我正在使用嵌套一些 div 的无序列表来在屏幕上显示所需的输出。我使用 css 来设计它们，它们在 chrome 和 firefox 上看起来很完美。但在 IE(8) 中，似乎存在一个我无法找到的问题。
我正在使用下面的CSS
<style type="text/css">
.ur_container {width:980px; padding: 0; margin: 0;}
.ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; }
.ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; }
.bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;}
.bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;}
.bx_grp_title {float: left; font: bold 11px Arial; padding:5px;}
.bx_grp_options {float: right; font: 10px Arial; padding: 5px;}
.bx_grp_options a{color: #125B93; text-decoration: none; }
.bx_lnx {padding:0px; background-color: red;}
.bx_lnx_header {font:11px Arial; color:#333;}
.bx_lnx_title {float: left;}
.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
.bx_lnx_options {float: right;}
.bx_lnx_options a {color: #258CF4; text-decoration: none;}
.bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; }
.bx_lnx_notes {}
.bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;}
.bx_lnx_tags {}
.bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;}
</style>
针对以下 HTML
<div class="ur_container">
<ul class="bx_grp" id="grp_1">
<li>
<div class="bx_grp_header">
<span class="bx_grp_title">Personal File</span>
<span class="bx_grp_options"><a href="#">rename</a> • <a href="#">make private</a> • <a href="#">hide</a href="#"> • <a href="#">delete</a></span>
<div style="clear: both;"></div>
</div>
</li>
<li>
<ul class="bx_lnx" id="lnx_1">
<li>
<div class="bx_lnx_header">
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>
<span class="bx_lnx_options"><a href="#">edit</a> • <a href="#">move</a> • <a href="#">delete</a></span>
</div>
</li>
<li class="bx_lnx_url">http://www.google.com</li>
<li class="bx_lnx_notes"><span>search google for this</span></li>
<li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li>
</ul>
</li>
</ul>
</div>
这会在 Chrome 和 Fireworks 中产生此输出 alt text http://haberhavadis.com/chff.jpg
以及 IE 中的以下内容 alt text http://haberhavadis.com/IE.jpg
使用黄色和红色是为了表明出了问题。黄色部分是不需要的部分。
有人能给我指出正确的方向吗？
问候
最佳答案
这看起来像 IE7 文档模式下的 IE8 渲染，可以通过多种方式触发。
(OP 评论未使用 DOCTYPE 后更新。)
省略 DOCTYPE 将导致您的页面以 Quirks 模式呈现。请参阅 What happens in Quirks Mode? 您当然可以自由地执行此操作，但此答案将基于添加 DOCTYPE，以便页面将以标准模式呈现。您可以自行决定是否要走这条路(请参阅 Choosing the right doctype for your HTML documents 。)
我建议使用 HTML 4.01 Strict...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...甚至 HTML 5...
<!DOCTYPE html>
...以及使用 validator 来捕获任何标记错误。
现在我们正在标准模式下渲染，我们可以使用 W3C box model，其中元素的 width 包含 border 和 padding ，但不包含 margin 。
单独进入标准模式将解决您在 IE8 中看到的空白，但您仍然会在 IE7 中看到它(即使在标准模式下 - 这是一个浏览器错误)。由于您使用的是固定宽度(并且假设您正在标准模式下渲染，您将采用标准模式路线)，一个简单的解决方法是...
#lnx_1 {width: 968px;}
968px 的宽度来自 980px (.ur_container 的宽度)- 2px (.bx_grp 每侧边框 1px)- 10px (.ur_container ul.bx_lnx 每侧填充 5 像素)= 968px。
有关此特定 IE 列表项错误修复的更多信息，请参阅 this page。
进入标准模式时需要进行另一项更改:
.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
如果没有井号，color: fff 部分无效；将其更改为 color: #fff
至于 <span class="bx_lnx_options"> 比您想要的低一行，更改为标准模式会使其在 IE8 中保留在第一行，但在 IE7 中不会。更改源顺序可以解决此问题...
<span class="bx_lnx_options"><a href="#">edit</a> • <a href="#">move</a> • <a href="#">delete</a></span>
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>
请参阅 this answer 了解发生这种情况的原因。
关于html - 无序列表的 css 问题(与 IE 一样)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2821498/