当父容器太窄时，IE6 会降低内容答案

【问题标题】：IE6 bumps down content when the parent container is too narrow当父容器太窄时，IE6 会降低内容
【发布时间】：2016-12-26 00:19:01
【问题描述】：

在以下示例中，右侧容器在符合标准的浏览器中显示在左侧容器的右侧，但在 IE6 中，蓝色右侧容器出现在左侧容器下方。 IE6 有效地将其向下碰撞，因为父容器比左侧和右侧容器的总宽度窄。

我有以下 HTML：

<html>
    <head>
       <style>
        #parentcntnr{
            width: 900px;
            border: 3px solid black;
        }

        #leftside{
            width: 200px;
            float: left;
            background-color: red;
            position: relative;

        }

        #rightside{
            width: 800px;
            background-color: blue;
            margin-left: 210px;
        }

    </style>
</head>
<body>
    <div id="parentcntnr">
        <div id="leftside"> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
        <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
    </div>
</body>

如何像在 Firefox 3.5 中那样进行渲染？我希望右侧和左侧容器并排保持并在父容器小于子容器的总宽度时出现水平滚动条。

郑重声明：这是一个展示我在网站上遇到的问题的示例。当浏览器窗口的大小调整为小于两个子宽度的总和时，会发生上述行为。这给屏幕分辨率低的客户端带来了问题。

【问题讨论】：

那么你实际上有一个固定的父宽度，还是这是一个窗口大小调整问题？
网站上最高级别的父 div 有一个固定的，几乎所有其他内容，直到左侧和右侧容器具有自动宽度或 100% 宽度。

标签： html layout css-float internet-explorer-6

【解决方案1】：

<html>
<head>
   <style>
            #parentcntnr{
                    width: 900px;
                    border: 3px solid black;
            }

            #leftside{
                    width: 200px;
                    float: left;
                    background-color: red;
                    position: relative;

            }

            #rightside{
                    width: 800px;
                    background-color: blue;
                    position: absolute;
                    float: right;
            }

    </style>
</head>
<body>
    <div id="parentcntnr">
            <div id="leftside"> content </br>content </br>content </br>content  </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
            <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div>
    </div>

这解决了它。

【讨论】：

在更好的浏览器中不起作用。在每个火狐和最新的IE8下。
是的，但你可以添加 _position: absolute; _float：对；相反，这将只针对 IE6。
抱歉，绝对定位是没有意义的。

【解决方案2】：

如果您在源代码树中将右浮动元素放在左浮动元素之前：

那应该可以解决您的浮动问题。我不确定您是否可以防止它们在父容器太窄时破坏，但 IE6 肯定有一些时髦的溢出逻辑。

【讨论】：

这似乎只是让红色左侧容器呈现在蓝色右侧容器下方，左侧容器上方有一个正方形的空白区域。

【解决方案3】：

在继续之前，您需要确保您使用的是正确的doctype。使用<!doctype html>。您还需要将所有错误的</br> 元素替换为<br>。

第一个问题是#rightside 太宽了。它是 800 像素，而在用 200 像素宽的内容填充 900 像素宽的容器后只剩下 700 像素，#leftSide。所以：

#rightside{
    width: 700px;
}

应该修复它。

第二个问题是你没有在任何地方浮动#rightSide。它不会从#leftSide 向左或向右浮动。我们想把它放在右边，所以

#rightside{
    float: right;
}

应该修复它。这也使得margin-left 完全多余。

现在它在较旧的 IE 浏览器中应该看起来不错（只是因为它们在浮动上有错误）。但在更好的浏览器中，容器 div 不会包装这两个浮动元素。确实如此，之后您仍然需要clear both 浮动。这是通过添加基本来完成的

<br style="clear: both;">

作为容器div的最后一个元素。

现在，适用于所有浏览器的最终结果应如下所示：

<!doctype html>
<html>
    <head>
       <style>
            #parentcntnr {
                width: 900px;
                border: 3px solid black;
            }
            #leftside {
                width: 200px;
                float: left;
                background-color: red;
            }
            #rightside {
                width: 700px;
                float: right;
                background-color: blue;
            }
            . clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="parentcntnr">
            <div id="leftside"> content <br>content <br>content <br>content  <br>content <br>content <br>content <br>content <br> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <div id="rightside">content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div>
            <br class="clear">
        </div>
    </body>
</html>

希望这会有所帮助。

【讨论】：

我认为您错过了问题的重点。右侧必须比父容器的固定宽度宽。所以你不能将宽度更改为 700px。过宽的#rightside 应该强制水平滚动条，而不是在#leftside 之前下拉。