web-dev-qa-db-ja.com

Firefoxでパーセンテージパディングが予期しない動作をする

Firefoxで奇妙な動作が発生しています（v35v39 v52）パーセンテージパディングに関して。この問題をChromeで再現することはできません。

次のように、上部のパディングがパーセンテージで設定された要素があります。

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}

要素のパディングのパーセンテージは 親の幅に対する です。したがって、ウィンドウの幅が拡大すると、要素の上部のパディングが大きくなると思います。これは確かに私の単純な<p>タグの結果です。

ただし、その要素がフロートされているか、幅がある場合、ウィンドウのサイズが変更されたときに、パーセンテージのパディングが期待どおりに動作しません。パディングはロード時に正しく計算されます。ただし、ウィンドウのサイズが変更されると、フロートされている要素または幅のある要素の合計の高さは同じままであるように見えます。要素内のテキストは、不思議な高さになる領域の下部に不可解に配置されます。これは、次のような要素で発生します。

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    float:left;
}

p {
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
    width:150px;
}

これが私が見ているものを説明するための画像です。色分けはFirebugによって追加されました。紫はパディング、黄色はマージン、青は要素のコンテンツです。

illustration of percentage padding problem in firefox

この不一致の原因は何ですか？他の誰かがFirefox（または他のブラウザ）でこの問題を再現できますか？

これが デモンストレーションするフィドル です。 Firefoxで、結果ペインを拡大または縮小して、要素のサイズが変更されることを確認してください。

スニペット領域のサイズをオンザフライで変更する簡単な方法が見つからなかったため、実行可能なコードスニペットを追加していません。

問題を示すためにスタックスニペットを追加しました。 「フルページ」ボタンを使用して、ウィンドウの幅を拡大できます。

html,body {
  margin: 0;
}
div#container {
  width: 100%;
}
p {
  padding: 10% 0 0;
  margin: 0 0 1em;
  background-color: #CCC;
}
p.width_limited {
  width: 150px;
}
p.floated {
  float: left;
}
<div id="container">
  <p>NORMAL</p>
  <p class="floated">FLOATED</p>
  <div style="clear:both;height:0;"></div>
  <p class="width_limited">HAS WIDTH</p>
</div>
cssfirefoxresponsive-designpage-refresh
24
showdev

疑似要素を使用してバグを回避し、必要な幅の10％の高さをクリアすることができます。

html,
body {
  margin: 0;
}

div#container {
  width: 100%;
}

p {
  margin: 0 0 1em;
  background-color: #CCC;
}

p:before {
  content: '';
  padding: 5% 0;
  display: block;
}

p.width_limited {
  width: 150px;
}

p.floated {
  float: left;
<div id="container">
    <p>NORMAL</p>
    <p class="floated">FLOATED</p>
    <div style="clear:both;height:0;"></div>
    <p class="width_limited">HAS WIDTH</p>
</div>
5
G-Cyrillus

それは奇妙です。バグかどうかはわかりません。しかし、ディスプレイをフレックスに変更することで問題は解決するようです。 http://jsfiddle.net/vsvp71rw/4/

p {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    padding:10% 0 0;
    margin:0 0 1em;
    background-color:#CCC;
}
5
Aakash