1

Zen Grids を使用して、これまでのようにレイアウトとの戦いに何時間も費やすことを避けようとしています。シンプルさ以外に私がそれから望んでいた主な利点は、ほとんどのブラウザーで複合的なサブピクセルの丸めの問題を回避することでした (前の列に依存するのではなく、フロートと負のマージンを介して要素を配置することによって提供されます)。

ただし、IE7 ではレイアウトを動作させることができません。IE7 レガシー サポートが有効で、boxsizing.htc が正しく機能しています。作成したテスト ページは、ヘッダー、2 つのサイド バー、コンテンツ領域、およびフッターで構成されています。Zen Grid のように float と負のマージンを使用して要素を配置すると、以下に示すように、すべての要素が同じ物理空間に積み重なってしまいます。Zen Grid を使用すると、まったく同じ動作になります。これは IE7 でのみ発生します (IE6 には関係ありません)。

さまざまな要素に haslayout を設定しようとしましたが、成功しませんでした。命を救うために同じ問題の例を見つけることができません。

レイアウトの折りたたみスクリーンショット。

ここに jsfiddle の例を設定します: jsfiddle

html は次のとおりです。

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="container">
        <div class="header">
            <h2>Header</h2>
        </div>
        <div class="sideOne">
            <h2>Sidebar 1</h2>
        </div>
        <div class="content">
            <h2>Page Content</h2>
        </div>
        <div class="sideTwo">
            <h2>Sidebar 2</h2>
        </div>
        <div class="footer">
            <h2>Footer</h2>
        </div>
    </div>

</body>
</html>

そしてCSS：

.container {
    position: relative; /* Checked to see if haslayout was the issue */
    zoom: 1;
    width: 1000px;
    background: silver;
}
.header {
    float: left;
    margin-left: 0;
    margin-right: -100%;
    width: 100%;
    height: 60px; /* For visibility */
    background: green;
}
.sideOne {
    float: left;
    clear: left;
    margin-left: 0;
    margin-right: -25%;
    width: 25%;
    height: 40px; /* For visibility */
    background: purple;
}
.content {
    float: left;
    margin-left: 25%;
    margin-right: -75%;
    width: 50%;
    height: 40px; /* For visibility */
    background: orange;
}
4

0 に答える 0