Question

在下面的示例中，右侧容器在符合标准的浏览器中显示在左侧的右侧，但在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中进行此渲染？我希望左侧容器和左侧容器并排放置，当父容器小于子容器的总宽度时，会出现水平滚动条。

记录：这是一个展示我在网站上遇到的问题的示例。当浏览器窗口的大小设置为比两个子宽度的总和窄时，会出现上述行为。这对屏幕分辨率较低的客户端造成了问题。

Answer 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>

这解决了它。

Answer 2

如果将右浮动元素放在源树中左浮动元素之前：
＆lt; div id =“parent”＆gt;
＆lt; div id =“rightSide”/＆gt;
＆lt; div id =“leftSide”/＆gt;
＆LT; / DIV＆GT;
这应该照顾你的浮动问题。我不确定你是否可以阻止它们在父容器太窄的情况下破坏，IE6有一些时髦的溢出逻辑，这是肯定的。

Answer 3

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

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

#rightside{
    width: 700px;
}

应该修复它。

第二个问题是你没有将#rightSide浮动到任何地方。它不会从#leftSide向左或向右浮动。我们希望在正确方面拥有它，所以

#rightside{
    float: right;
}

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

现在它应该在旧的IE浏览器中看起来很好（仅仅因为它们在浮动上有错误）。但是在更好的浏览器中，容器div不会包装两个浮动元素。确实如此，之后你还需要清除两个浮动。这是通过添加基本

来完成的

<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>

希望这有帮助。

当父容器太窄时，IE6会破坏内容

3 个答案: