首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在li项中使用DIV中的边距'auto‘时,DIV在IE7和IE6上消失。

在li项中使用DIV中的边距'auto‘时,DIV在IE7和IE6上消失。
EN

Stack Overflow用户
提问于 2009-11-05 18:28:31
回答 3查看 905关注 0票数 0
代码语言:javascript
运行
复制
   <!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滑块的一部分.

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2009-11-05 18:52:55

关于问题本身,IE开发人员工具表明正在发生以下情况(粗体中的IE例外):

  1. div.menu格式为宽度500 li,有溢出隐藏的
  2. ,封闭ul.menu的样式为宽度1500 li,安莉在其中浮动。在IE中,li错误地接受了其父ul (1500 of )的宽度,而不是其子块元素的宽度,即从其子块( 100px.
  3. The div#inner为div#outer)派生其宽度的div#outer (在IE的某些版本中,您可能需要添加文本-对齐: div#outer样式中的中心)。在IE中,由于li的过大导致了div#outer的过大,这太过分了。即使您不使用开发人员工具,也可以将clear.

转换为div.menu :visible快速地使文本的位置显示为

建议的解决办法:

500px.

  • There's
  • 使li的宽度不超过li,不需要在li中添加无用的外部div。除非有令人信服的理由,否则只需在li.
  • 中下载IE Developer tools

即可。

在我看来,CSS中有几个部分似乎没有意义,也许一旦清理完毕,可能会使问题更容易隔离。

票数 1
EN

Stack Overflow用户

发布于 2009-11-05 18:49:48

div#outer可能会跨越LI的全部宽度,这个宽度为1500 LI(继承您的UL声明)。如果div#inner居中且100 it宽,它将显示在溢出范围之外:隐藏在div#menu上。

我相信我能看到你想用这个做什么,也许是想要一个画廊滑块。你可能需要明确地把你的李的宽度设置为500 LI。然后,你可以让三个李在一起漂浮在一起。

票数 0
EN

Stack Overflow用户

发布于 2009-11-05 19:12:33

如上所述,您的div#outer正在跨越LI的全部宽度(1500 LI)。Div是块级元素,这意味着在默认情况下,它们将跨越包含元素的整个宽度,除非另有说明。

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

In :默认情况下,块元素跨越其包含元素的整个宽度,默认情况下,内联元素跨越其最宽子元素的宽度。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1682596

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档