web-dev-qa-db-ja.com

Firefoxではpadding-bottomは無視され、コンテンツのないオーバーフロー要素ではIE

この質問はこれら2に関連しています：
1。 css-スクロールでボックスにパディングを適用すると、下のパディングは機能しません
2。 非クロムブラウザのオーバーフロー要素で下部パディングが機能しない

しかし、なぜそれが発生するのか、つまり、Chrome（31）とOpera（18）ではパディングが表示され、Firefox（26）とIE（9-10）では表示されない理由についてはどこにも見つかりませんでした。

これが私のテストケースです：
http://jsfiddle.net/eW39h/4/

関連する質問＃1からのより簡単な例：
http://jsfiddle.net/rwgZu/

<div id="container">
    <div id="innerBox"></div>
</div>

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#innerBox{
    height: 400px;
    background: #000;
}

私は実際には修正を探していませんが、正しい実装が正確に何であるか（そしてどのブラウザがそれを間違えたかを理解するために:-)）。

[〜＃〜]編集[〜＃〜]2013年12月18日

Marc Audetの回答に基づいて、仕様を掘り下げて新しいテストケースを作成しました。
http://jsfiddle.net/rwgZu/79/

ここでは、すべてのブラウザが同じポイントでオーバーフローしたボックスをクリップしていることは明らかです。これは、実際に仕様に準拠している「パディングエッジ」です。

オーバーフローが発生するたびに、「overflow」プロパティは、ボックスがそのパディングエッジにクリップされるかどうかを指定します

それでも、Chromeでは、内側のボックスの後に余分なパディングがあります。

ただし、興味深いことに、内部ボックス内にオーバーフローコンテンツを追加すると、すべてのブラウザーで統一された結果が得られます。
http://jsfiddle.net/uPY8j/1/

このタイプの条件のルールが仕様に見つからなかったので、今のところ質問は開いたままにしておきます。

htmlcssinternet-explorergoogle-chromefirefox
22
Alex Ilyaev

私はここで同じ問題を抱えており、：last-child div（最後の子が非表示になっている場合はどうなりますか？）とmargin-bottomトリック（それほど良くない、スクロールバーは下部に到達しません）を使用する代わりにこれを使用します：

#container {
  padding: 20px;
  padding-bottom: 0;
  overflow: auto;
}

#container:after {
  content: "";
  height: 20px;
  display: block;
}

したがって、疑似要素を挿入すると余分なスペースが確保されるので、それを使用してパディングの下部の値をシミュレートできます。どう思いますか？

JSFIDDLE HERE： http://jsfiddle.net/z72sn0p2/2/

29
ans777

W3仕様によれば、オーバーフローしたコンテンツはパディングボックスの端にクリップされます。

http://www.w3.org/TR/CSS21/visufx.html

FFは、パディングボックスのエッジを外側のエッジとします。これは、パディングボックスの定義に従っているようです。

http://www.w3.org/TR/CSS21/box.html

その場合、FFはCSS仕様の文言の精神に近いようですが、Chromeは、コンテンツボックスのエッジ（の内側のエッジ）にクリップすることを決定したようです。パディングボックス。

仕様を引用するには：

パディングエッジはボックスパディングを囲みます。

これは、境界に近いエッジのコンテンツボックスに近いエッジを意味しますか？

あいまいさがあり、2つの解釈につながると思います。純粋数学や幾何学に傾倒している読者はそれを一方向に見るかもしれず、法的な背景を持つ読者は別の見方を主張するかもしれないと私は思う。

私の意見では、ボックスモデルの説明は、思考の進行が内側のコンテンツ領域から外側のマージン領域に向かうように表現されています。そういうわけで、「周囲」という言葉は、その領域の外縁を囲むことを意味すると思います。したがって、FFの方がおそらく正しいと思いますが、Chromeの他の開発者はそうではないと思います。

5
Marc Audet