在 li 项内的 DIV 中使用边距“自动”时，DIV 在 IE7 和 IE6 上消失答案

【问题标题】：DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item在 li 项内的 DIV 中使用边距“自动”时，DIV 在 IE7 和 IE6 上消失
【发布时间】：2009-11-06 10:30:35
【问题描述】：

   <!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 的边距中删除“自动”字样时，它会显示在两个资源管理器上。我怎样才能解决这个问题？我无法删除“自动”，因为我希望内部 div 在外部 div 内部居中对齐。

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

【问题讨论】：

我注意到，我设法在没有“自动”的情况下让它工作。

标签： html css internet-explorer

【解决方案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#outer 过大，这太靠右了。即使您不使用开发人员工具，将 div.menu 快速变为 overflow:visible 也可以使文本的位置清晰显示。

推荐的解决方案：

让li的宽度不超过500px。
不需要在 li 中添加无用的外部 div。除非您有令人信服的理由，否则只需将 div#inner 直接放入 li。
下载 IE 开发工具

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

【讨论】：

@steven：它是 DIV 画廊的一部分。显示溢出：可见/删除外部 div/将 li 宽度更改为 500 不是一种选择。

【解决方案2】：

div#outer 可能会跨越 LI 的整个宽度，即 1500 像素宽（继承自 UL CSS 声明）。如果 div#inner 居中且宽度为 100px，它将显示在 div#menu 上的 overflow:hidden 范围之外。

我相信我可以看到你想用这个去哪里，也许想有一个画廊滑块。您可能需要明确地将 LI 的宽度设置为 500 像素。然后，您可以让三个 LI 并排浮动。

【讨论】：

有什么线索吗？这与我在答案中提出的相同，但我无法弄清楚 IE 背后的想法。浮动块不应该占用它最宽的孩子的宽度吗？
这真的只是一种预感，IE 被窃听了 :x
@cballou：“也许试图拥有一个画廊滑块”- 没错。这是 DIV 滑块。

【解决方案3】：

如上所述，您的 div#outer 跨越了 LI (1500px) 的整个宽度。 div 是块级元素，这意味着默认情况下，除非另有说明，否则它们将跨越其包含元素的整个宽度。

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

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

【讨论】：