0

以下布局在除 Internet Explorer 8 之外的所有浏览器（Firefox、Chrome、Opera）中都能正常工作：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    <head>
    <body>
        <div id="divMain" class="CMain">
            <div id="divL" class="CLeft">
            </div>
            <div id="divR" class="CRight">
            </div>
        </div>
    </body>
</html>

CSS：

.CMain {
    position: absolute;
    overflow: hidden;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 75%;
    min-width: 500px;
    min-height: 400px;
    max-height: 550px;
    background-color: cyan;
    border: 1px solid #000000;
    margin: 0 auto;
}

.CLeft {
    position: absolute;
    overflow: visible;
    top: 0px;
    right: 50%;
    width: 49%;
    height: 100%;
    min-width: 200px;
    min-height: 450px;
    max-width: 450px;
    max-height: 550px;
    background-color: yellow;
    border: 1px solid #000000;
    margin: 0 auto;
    padding: 0px;
}

.CRight{
    position: absolute;
    overflow: visible;
    top: 0px;
    left: 50%;
    width: 49%;
    height: 100%;
    min-width: 200px;
    min-height: 450px;
    max-width: 450px;
    max-height: 550px;
    background-color: blue;
    border: 1px solid #000000;
    margin: 0 auto;
    padding: 0px;
}

两个内部 div 应该在主 div 的中心背靠背，它们显然在除 IE8 之外的所有浏览器中。在 IE8 中，左 div 位于左侧，而不是中心。

难道我做错了什么？（请不要建议删除最小/最大宽度/高度约束，它们是必需的）。任何建议将不胜感激。

这是这个设置的一个小提琴：http: //jsfiddle.net/fNtJU/

imageshack截图链接ie8：http: //img831.imageshack.us/img831/3838/ie8g.jpg

4

1 回答 1

0

您是否尝试过在主容器上设置宽度？例如，宽度：90%；并失去left:20px;/right:20px;。我不认为当父容器没有指定明确的宽度时，子容器可以计算位置，即使使用最大宽度也是如此。我目前无法在 ie8 上进行测试。

于 2012-09-13T22:42:26.837 回答