Question

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css" media="screen">
        div.menu {position: relative; width: 600px; overflow: hidden;}          
        ul.menu {display: block; padding: 0px; width: 1500px; margin: 0; list-style: none;}             
        .menu li {display: block; float: left; padding: 0 2px; }        
    </style>
</head>
<body>
    <div style="width: 500px;" class="menu">
        <ul class="menu">
            <li>
                <div id='outer'>
                    <div id='inner' style="margin:0 auto;width:100px;">
                        I want this text to show up
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

这是整页的精简版。我可以在FF中看到“我希望这个文字出现”的文字。但这在IE7和IE6中是不可见的。当我从内部DIV中的边距中删除“自动”单词时，它会出现在两个探险家身上。我怎样才能解决这个问题？我无法删除'auto'，因为我希望内部div在外部div中居中对齐。

注意：它是DIV滑块的一部分。

Answer 1

关于您的问题本身，IE开发人员工具建议发生以下情况（粗体中的IE例外）：

div.menu的样式为宽度为500px，溢出隐藏
封闭的ul.menu的样式宽度为1500px，其中有一个li浮动。 在IE中，li错误地取其父级ul（1500px）的宽度而不是其子块元素的宽度，即div＃outer，它从其子div＃inner派生其宽度，即100px。

div＃inner以div＃outer为中心（在IE的某些版本中，您可能需要在div＃outer的样式中添加text-align：center）。在IE中，由于li的超大尺寸造成了div #external的超大，因此这个距离太远了。即使您不使用开发人员工具，也可以将div.menu转为溢出：快速显示，使文本的位置显示清晰。

推荐的解决方案：

使li的宽度不超过500px。

没有必要在li中添加无用的外部div。除非你有令人信服的理由，否则只需要在李的内部＃右边。

下载IE开发人员工具

CSS的一些部分对我来说似乎没有意义，也许一旦你清理完毕，可能会使问题更容易被隔离。

Answer 2

div #external 可能跨越LI的整个宽度，宽度为1500px（继承自UL CSS声明）。如果 div＃inner 居中并且宽度为100px，则会显示在 div＃menu 上 overflow：hidden 的范围之外。

我相信我可以看到你想要去哪里，或许试图拥有一个画廊滑块。您可能需要明确地将LI的宽度设置为500px。然后你可以让三个LI浮动在一起。

Answer 3

如上所述， div＃outer 跨越LI的全宽（1500px）。 Div是块级元素，这意味着默认情况下它们将跨越其包含元素的整个宽度，除非另有说明。

此外，关于LI错误地从它的包含元素而不是它的子元素获取宽度的声明并不完全正确。默认情况下为true，但声明为LI（ display：block; ）的CSS规则将LI从内联元素更改为块级元素，就像DIV将从其中获取宽度包含元素。

总结：块元素默认涵盖其包含元素的整个宽度，内联元素跨越其最宽子元素的宽度默认值。

当在li项目内的DIV中使用边距'auto'时，DIV在IE7和IE6上消失

3 个答案: