4

FF でサイトをテストしているときに奇妙な問題に遭遇しました。

状況は次のとおりです。

  • box-sizing: border-boxすべてに適用されます。
  • <div>高さが固定されたフローティング ラッパーがあります。
  • ラッパーの中には<img>withがありheight: 100%ます。

ラッパーにパディングを追加すると、ラッパーは同じ高さのままで、画像は同じアスペクト比のままであると予想されますが、高さからパディングを引いたものに合わせて縮小されます。ラッパーの幅は、画像の新しい幅とパディングに合わせて変更する必要があります。

これは、OSX と Win7 の両方の Chrome と IE で期待どおりに動作しますが、FF では、パディングが追加されていない場合と同じままのように見えます。

何か不足していますか、それとも Firefox のボックス サイズ設定のバグですか?

このフィドルは問題を示しています：

http://jsfiddle.net/3j43Y/1/

スクリーンショット:

ここに画像の説明を入力 Chrome での結果

最初の画像は Firefox での結果、2 番目の画像は Chrome です。

4

3 に答える 3

4

これはバグのようですが、パディングが適用されていないかのように幅を計算していません。コンテンツ (<img>タグ) にパディングが適用されていない場合の幅があるかのように幅を計算しています。次に、この誤って計算されたコンテンツ幅の上にパディングを追加しています。

つまり、パディングがない場合、<img>要素の幅は 167px になります。次にパディングを追加すると、（高さの制約により）縮小し、 の幅は、縮小された幅にパディングを加えた.wrapper幅になるはずです。<img>代わりに、(少なくとも FF では).wrapperの幅は、縮小 <img>されていない幅にパディングを加えた幅 (167 + 16) です。

少なくとも、それは私が見ているものです。

paddingまた、開発ツールでルールのオン/オフを切り替えると、Chrome (35.0.1916.114) でも同じように表示されるようです。最初は Chrome で正しく処理されますが、切り替え後に同じ誤った動作が見られますpadding。

于 2014-05-27T12:16:53.567 に答える
1

@BYossarianの答えは正しいです。以下の回答は、問題が発生したときに考えられる回避策です。

は特定の高さに設定されているため.wrapper、画像にパディングを追加して、探している効果を得ることができます。

デモ：

<style type="text/css">
* {
   -moz-box-sizing: border-box;    
   box-sizing: border-box;    
}

.wrapper {
   float: left;
   height: 100px;
   background: #99ccff;
}

.wrapper img {
   height: 100%;
   padding: 8px;
}
</style>

<div class="wrapper">
   <img src="http://placehold.it/250x150" alt="">
</div>

于 2015-12-01T07:35:49.623 に答える