当在li项中的DIV中使用边距'auto'时，DIV在IE7和IE6上消失
[英]DIV disappears on IE7 and IE6 when using margin 'auto' in a DIV inside li item
问题描述
<!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>
This is stripped down version of a full page. 
这是整页的简化版本。 I can see the text 'I want this text to show up' in FF. 我可以在FF中看到“我希望此文本显示”文本。 But this is invisible in IE7 and IE6. 但这在IE7和IE6中是不可见的。 The moment I remove 'auto' word from margin in inner DIV, it shows up on both explorers. 当我从内部DIV的空白处删除“自动”一词时，这两个浏览器中都会显示该单词。 How can I fix this? 我怎样才能解决这个问题？ I can't remove 'auto' as I want inner div to be centrally aligned inside outer div. 我无法删除“自动”，因为我希望内部div在外部div内居中对齐。
NOTE: It's a part of DIV slider. 注意：这是DIV滑块的一部分。
3 个解决方案
解决方案1
1 已采纳 2009-11-05 18:52:55
Regarding your problem itself, IE developer tools suggests that the following is happening (with the IE exception in boldface ): 关于您自己的问题，IE开发人员工具建议正在发生以下情况（IE异常以粗体显示 ）：
- div.menu is styled as width 500px with overflow hidden div.menu的样式设置为宽度500px，隐藏了溢出
- The enclosed ul.menu is styled with width 1500px, and an li floats therein. 随附的ul.menu样式的宽度为1500px，并且li漂浮在其中。 In IE, the li incorrectly takes the width of its parent ul (1500px) rather than the width of its child block elements, namely, div#outer, which derives its width from its child div#inner, which is 100px. 在IE中，li错误地采用了其父ul（1500px）的宽度，而不是其子块元素即div＃outer的宽度，该宽度是从其子div＃inner导出其宽度的，即100px。
- The div#inner is centred in div#outer (in some versions of IE, you might need to add text-align: center in the style for div#outer). div＃inner位于div＃outer的中心（在IE的某些版本中，您可能需要添加text-align：以div＃outer的样式为中心）。 In IE, this is too far to the right due to the oversizing of div#outer caused by the oversizing of li. 在IE中，由于li的大小过大导致div＃outer的大小过大，因此此方法向右偏远。 Even if you don't use developer tools, turning div.menu to overflow:visible quickly makes the location of the text to show up clear. 即使您不使用开发人员工具，也可以快速将div.menu变为overflow：visible以使文本位置清晰可见。
Recommended solutions: 推荐的解决方案：
- Make the width of li no more than 500px. 使li的宽度不超过500px。
- There's no need to add a useless outer div within li. 无需在li中添加无用的外部div。 Unless you have a compelling reason, just plop div#inner right in li. 除非您有令人信服的理由，否则只需在div中插入div＃inner即可。
- Download IE Developer tools 下载IE开发人员工具
There are a few parts of the CSS that don't seem to make sense to me, that perhaps once you cleared up, might make the problem easier to isolate. CSS的某些部分对我来说似乎没有意义，也许一旦您解决了这些问题，便可能更容易发现问题。
解决方案2
0 2009-11-05 18:49:48
div#outer may potentially be spanning the full width of your LI, which is 1500px wide (inheriting from your UL CSS declaration). div＃outer可能跨越LI的整个宽度，即1500px宽（继承自UL CSS声明）。 If div#inner is centered and 100px wide, it would display outside the scope of your overflow:hidden on div#menu . 如果div＃inner居中且宽度为100px，它将显示在您的溢出范围之外：隐藏在div＃menu上 。
I believe I can see where you are trying to go with this, perhaps trying to have a gallery slider. 我相信我可以看到您尝试使用此功能的地方，或者尝试使用图库滑块。 You may need to explicitely set the width of your LI to 500px. 您可能需要将LI的宽度明确设置为500px。 You can then have three LI's floated next to each other. 然后，您可以使三个LI彼此相邻浮动。
解决方案3
0 2009-11-05 19:12:33
As noted above your div#outer is spanning the full width of the LI(1500px). 如上所述，您的div＃outer跨越了LI（1500px）的整个宽度。 Divs are block level elements which means that by default they will span the entire width of their containing element unless told otherwise. Div是块级元素，这意味着默认情况下，除非另有说明，否则它们将跨越其包含元素的整个宽度。
Also, the statement made about the LI incorrectly taking it's width from it's containing element rather than it's child elements is not totally right. 同样，关于LI错误地从其包含元素而不是其子元素中获取其宽度的陈述也不是完全正确的。 By default that is true, but the CSS rule declared to make the LI ( display:block; ) changes the LI from an inline element to a block level element which like the DIV will take it's width from it's containing element. 默认情况下，这是正确的，但是声明为使LI（ display：block; ）的CSS规则将LI从内联元素更改为块级元素，就像DIV一样，它将从其包含元素获取其宽度。
In summary : block elements span the entire width of their containing element by default, inline elements span the width of their widest child by default. 总结 ： 块元素默认情况下跨越其包含元素的整个宽度， 内联元素默认情况下跨越其最宽子元素的宽度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.