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

2 つの内側の 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; を失います。max-width を使用しても、親に明示的な幅が指定されていない場合、子コンテナーは位置を計算できないと思います。ただし、現在 ie8 でテストすることはできません。

于 2012-09-13T22:42:26.837 に答える