Question

我有一个复杂的多级菜单。（绝对定位的）右侧菜单项在IE和Opera中的（绝对定位的）容器中溢出，而不是在Firefox（或Chrome或Safari）中溢出;我怀疑Firefox是错误的，因为我不明白为什么绝对定位的元素的尺寸应该由绝对定位的祖先约束。但是，这是我想要实现的Firefox效果。

我的约束是：我知道.outer的宽度;但是，我不知道应该确定.middle宽度的任何跨度的内容（以及宽度）。我不知道任何.inner div的内容（以及宽度），但是，它们的宽度不得影响父.middle的宽度。 .inner的左手边缘必须与其兄弟跨度的左手边缘对齐。即，它是一个两级菜单，其中第二级必须限制在一个祖先的边框内，但第一级中的每个项目都不得受其子菜单宽度的影响。

我需要做些什么更改才能将内部div限制在IE中外部div的边界？请参阅下面的代码的简化版本。在原始标记中，.outer为ul，.middle为li。

<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .outer{
            border: solid 1px black;
            width: 200px;
            position: absolute;
        }
        .outer div
        {
        border: solid 1px green;
            float: left;
        }
        .inner
        {
            position: absolute;
        }
        .inner p
        {
            border: solid 1px red;
        }
        span{
            display: block;
            padding: 0 10px;
        }
        .hide
        {
            display: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="middle">
            <span>outer</span>
            <div class="hide"><p>lots and lots of inner text</p></div>
        </div>
        <div class="middle">
            <span>outer</span>
            <div class="hide"><p>lots and lots of inner text</p></div>
        </div>
        <div class="middle">
            <span>outer</span>
            <div class="inner"><p>lots and lots of inner text</p></div>
        </div>
    </div>
</body>

Answer 1

您可以将.inner设置为position: relative来执行此操作。从您的代码示例中可以看出，为什么您首先选择了absolute，但是您应该使用relative来实现您想要进行的任何手动定位。不是相对于其包含块的原点设置top，right，bottom或left属性，而是相对于.inner通常的位置设置它们定位于流程中。

希望有所帮助！

Answer 2

我认为实际上Firefox是正确的，但我不是CSS专家。根据{{3}}，默认实现应该允许内容在包含框之外呈现，如果它太宽而不适合它。

这取决于您希望溢出的内容做什么。您是否尝试在外部DIV上设置w3schools CSS属性？或者在内部DIV上设置width？

Answer 3

我找到了一个部分解决方案，应用相对于.middle的位置。这应该适用于IE。不幸的是，这与填充物混淆，但希望这将是一个较小的问题来解决。这个版本使用了正确的元素 - 而不仅仅是div。

<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .outer{
            border: solid 1px black;
            position: absolute;
            width: 200px;
        }
        .inner
        {
            position: absolute;
            width: auto;
        }
        .middle
        {
            border: solid 1px green;
            float: left;
        }
        .inner *
        {
            border: solid 1px red;
        }
        span{
            display: block;
        }
        .hide
        {
            display: none;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            .middle{
                position: relative;
            }
        </style>
    <![endif]-->
</head>
<body>
    <ul class="outer">
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="inner"><li>lots and lots of inner text</li></ul>
        </li>
    </ul>
</body>

如何约束绝对定位的嵌套div的宽度？

3 个答案: