Html 当父容器太窄时，IE6会降低内容_Html_Layout_Css Float_Internet Explorer 6

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

html layout

Html 当父容器太窄时，IE6会降低内容,html,layout,css-float,internet-explorer-6,Html,Layout,Css Float,Internet Explorer 6,在下面的示例中，在符合标准的浏览器中，右侧容器显示在左侧容器的右侧，但在IE6中，蓝色右侧容器显示在左侧容器的下方。IE6有效地降低了它，因为父容器比左侧和右侧容器的总宽度窄我有以下HTML： <html> <head> <style> #parentcntnr{ width: 900px; border: 3px solid black; }

在下面的示例中，在符合标准的浏览器中，右侧容器显示在左侧容器的右侧，但在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>


#亲子关系{
宽度：900px；
边框：3倍纯黑；
}
#左边{
宽度：200px；
浮动：左；
背景色：红色；
位置：相对位置；
}
#右侧{
宽度：800px；
背景颜色：蓝色；
左边距：210像素；
}
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

如何使此渲染与Firefox 3.5中的渲染类似？我希望右侧和左侧容器并排放置，并且当父容器小于子容器的总宽度时，会显示一个水平滚动条

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

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

这会解决你的浮动问题。我不确定当父容器太窄时是否可以防止它们破裂，但IE6肯定有一些时髦的溢出逻辑。


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

#亲子关系{
宽度：900px；
边框：3倍纯黑；
}
#左边{
宽度：200px；
浮动：左；
背景色：红色；
位置：相对位置；
}
#右侧{
宽度：800px；
背景颜色：蓝色；
位置：绝对位置；
浮动：对；
}
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

内容
内容
内容
内容
内容
内容
内容
内容
内容

这会解决问题。

在继续之前，您需要确保使用的是正确的。使用

。您还需要将所有错误的

元素替换为

第一个问题是，

#右侧

太宽。它是800px，而在一个900px宽的容器中装满200px宽的内容物后，只剩下700px了，

#leftSide

。因此：

#rightside{
    width: 700px;
}

你应该把它修好

第二个问题是，

#右侧

没有浮动到任何地方。它不会从

#leftSide

向左或向右浮动。我们想把它放在右边，所以

#rightside{
    float: right;
}

你应该把它修好。这也使得左边距完全多余

现在，它在旧的IE浏览器中应该看起来不错（只是因为它们在浮动上有缺陷）。但是在更好的浏览器中，container 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>

#亲子关系{ 宽度：900px；边框：3倍纯黑； } #左边{ 宽度：200px；浮动：左；背景色：红色； } #右侧{ 宽度：700px；浮动：对；背景颜色：蓝色； } . 清楚的{ 明确：两者皆有； } 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

希望这能有所帮助。
那么，您是否真的有固定的父级宽度，或者这是一个窗口大小调整问题？网站上最高级别的父级div有一个固定的宽度，大多数其他内容都有，直到左侧和右侧容器具有自动宽度或100%宽度。这似乎只会使红色左侧容器呈现在蓝色右侧容器下方，左侧容器上方有一个正方形的空白。在更好的浏览器中不起作用。在每一款Firefox和最新的IE8.yes下，你可以添加_position:absolute_浮动：对；相反，这将只针对IE6。抱歉，但将其定位为绝对没有意义。我认为您没有抓住问题的关键。右侧必须比父容器的固定宽度宽。所以不能将宽度更改为700px。过宽的#右侧应强制水平滚动条，而不是在此之前下降