1

だから私はウェブページのボディの背景色を単色に設定し、すべてのコンテンツを含むコンテンツ div を別の背景色にし、幅を小さくして高さを 100% にしました (i以前に html と本文の高さと幅を 100% に設定しました)。クロム、ファイアフォックス、IE10では、両側に2つの色の列があり、コンテンツが中央にある白いボックスで、希望どおりに機能します。ただし、IE8 では、背景色もコンテンツの下に表示されるため、背景色がコンテンツの周りに一種の U を形成しますが、これは私が望むものではありません。何か案は？

body, html{
width:100%;
height:100%;
}
body {
    margin: 0px;
    color: #000;
    font-family: Corbel;
    font-size: 13px;
    line-height: normal;
    background-color: #d5e6c7;
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
#wrapper {
    width: 940px;
    height:100%;
    background-color:#FFF;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left top;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}

以下は css コードの一部ですが、コードの他の部分を見る必要があるかどうかはわかりません。どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

0

さて、テンプレートを見ると、レイアウトは次のようになります。

<html>
<body>
    <div id="templatemo_body_wrapper">
        <div id="templatemo_wrapper">
            <!-- content -->
        </div>
    </div>
    <div id="templatemo_footer_wrapper">
        <!-- footer -->
    </div>
</body>
</html>

したがって、そのレイアウトでこの正確な動作が本当に必要な場合は、古き良きパディング + 負のマージン ハック/トリック/シングが必要になるようです。

html, body { height: 100%; }
#templatemo_body_wrapper, #templatemo_wrapper { min-height: 100%; }
#templatemo_body_wrapper { overflow: hidden; }
#templatemo_wrapper {
    padding: 0 10px 2050px 10px !important;
    margin: 0 auto -2000px auto !important;
}

私にとってはIE8で動作するようです。やってみて。

元の応答

あなたが説明した問題を再現できません。

ただし、次のように、HTML ドキュメントの先頭で DOCTYPE を宣言したことを確認することをお勧めします。

<!DOCTYPE html>

そうしないと、IE がQuirks Modeになります。

Quirks モードをトリガーするために DOCTYPE なしでページをレンダリングしようとしましたが、白いセクションが中央に配置されなくなりました。これがあなたが説明している問題であるかどうかはわかりません。

于 2013-06-07T06:20:19.987 に答える