3

親タグ内に 3 つの div が含まれている 2 つの同一のコード セクションがあります。親タグの 1 つは HTML5 タグで、もう 1 つはクラス「.footer」の div タグです。これら 2 つのセクションに同一の CSS コードを指定しましたが、異なる結果が返ってきました。クラス「.one」の最初に含まれるdivタグの高さを400pxにサイズ変更しています。これは、含まれているタグの高さ300pxよりも大きくなっています。HTML5 タグを使用すると、含まれる div 全体が大きな div とともに展開されます。ただし、「フッター」クラスの div は変更されません。これは、CSS の記述が不適切なためですか、それとも HTML5 タグの動作が div タグと異なるためですか?

JSFiddleで見る

  <div class="footer">

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </div>

    <footer>

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </footer>

使用したCSSはこちら

.footer{
    background-color: rgba(0,0,102,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
.footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
footer{
    background-color: rgba(0,51,255,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
.one{
    height: 400px;
    }
4

1 に答える 1

5

これは、ユーザー エージェント スタイルシートが原因である可能性があります。ブラウザーは、さまざまな要素に既定の書式を設定します。例として、Chrome は として表示さpれdisplay: block;、いくつかmarginの が表示されますが、 に対しては同じではありませんspan。スタイルシートのリセットがなければ、特定のブラウザーで 2 つの HTML 要素が同じように表示されると考える理由はありません。

編集：

ただし、これはあなたの問題ではありません。ここでの問題は特異性です。すでにご存知かもしれませんが、特定の要素のプロパティに 2 つの競合する値がある場合、CSS は最も具体的なセレクターによって定義されたプロパティを選択します。この場合、セレクター.footer divは よりも具体的で.oneあるため、子 div は で定義された高さを使用して.footer divいますが、これはたまたま短い方です。

を使用して子のセレクターをdivより具体的に変更するidと、期待どおりに機能します。

于 2013-01-11T14:00:07.747 に答える