Question

我正在使用无序列表来嵌套某些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> &bull; <a href="#">make private</a> &bull; <a href="#">hide</a href="#"> &bull; <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> &bull; <a href="#">move</a> &bull; <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

使用黄色和红色来表示出错。黄色部分是不受欢迎的部分。

有人能指出我正确的方向吗？

此致

Answer 1

~~这看起来像IE7文档模式下的IE8渲染，可以通过多种方式触发。~~

（在OP评论说没有使用DOCTYPE后更新。）

省略DOCTYPE会导致您的页面以 Quirks 模式呈现。请参阅What happens in Quirks Mode?您当然可以自由地执行此操作，但此答案将基于添加DOCTYPE，以便页面将以标准模式呈现。如果你想这样做，你可以自己决定（参见Choosing the right doctype for your HTML documents。）

我建议使用HTML 4.01严格...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

...甚至是HTML 5 ...

<!DOCTYPE html>

...并使用validator来捕获任何标记错误。

现在我们正在以标准模式呈现，我们可以使用width元素的border包含padding和margin，但是不是#lnx_1 {width: 968px;}。

单独进入标准模式会照顾你在IE8中看到的差距，但你仍然会在IE7中看到它（即使在标准模式下 - 这是一个浏览器错误）。由于您使用的是固定宽度（假设~~您正在标准模式下渲染~~，您将进入标准模式路线），一个简单的解决方案就是......

968px

.ur_container的宽度来自 980px （.bx_grp的宽度） - 2px （{{1}每边的1px边框}}） - 10px （.ur_container ul.bx_lnx每侧5px填充）= 968px 。

有关此特定IE列表项错误修复的详细信息，请参阅W3C box model。

进入标准模式时需要进行另一项更改：

.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> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span>
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>

请参阅this page，了解发生这种情况的原因。

无序列表的css问题（与IE一样）

1 个答案: