問題タブ [border-box]

まず、Internet Explorer 8 はbox-sizing: border-box; を完全に無視しているようです。ボックスにmin-heightが設定されている場合の宣言(この投稿は、https://stackoverflow.com/a/11714178/3355252を確認します)。

今、私が達成する必要があることを説明しましょう。これが私のサイトです（かなり簡略化されています）：http://jsfiddle.net/ttKP3/。Doctype は HTML 4.01 Strict です。

私が必要とするのは、画面の一番下にあるフッターと、画面全体を上から下まで埋めるメインボックスです。また、コンテンツが大きくなると ( JSFiddle で[ Add content ] を数回クリック)、メインボックスを拡大し、それに応じてフッターを移動する必要があります。

Chrome と Firefox で問題なく表示されます。おそらく IE8 で実行することはできません (JSFiddle をレンダリングしません) が、メインのボーダー ボックスプロパティは完全に無視されるため、メインボックスは本来よりも200 ピクセル高くなります。画面の領域。

border-boxとmin-heightを使用して処理できなかったように見えるため、IE8 用の他のソリューションを探しています。私の頭に浮かんだのはcalc、つまりheight: calc(100% - 200px);を使用することだけでした。しかしIE8もそれをサポートしていません。ちなみに、 IE8で実行したときにhtml要素にie8クラスを条件付きで追加しているので、クロスブラウザソリューションは必要ありません。その特定のブラウザで目的のレイアウトを取得するためのCSSだけです。

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

状況は次のとおりです。

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

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

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

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

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

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

スクリーンショット:

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

コンテンツが垂直方向に中央に配置されたボックスを作成したいのですが、コンテンツがオーバーフローした場合はスクロールします。vertical-align: middle でテーブルを使用して垂直方向のセンタリングを実現できますが、td はスクロールをオーバーフローできないため、スクロール div を td 内に配置し、height: 100% にしました。スクロール div にパディングを与えようとするまでは問題ありません。これにより、td に対して幅が広すぎるため、box-sizing: border-box を与えます。その後、突然、div に上下の余白ができました。

何!?

http://codepen.io/jessehattabaugh/pen/GIjiL

緑の線と赤の線の間にスペースがあってはいけませんが、そこにあります! 緑の div のパディングを変更すると、不思議なマージンが変わります。高さ: 100% は実際には 100% であるかのようです - パディングか何か。パディングまたは box-sizing: border-box を削除すると、消えます。

ボーナス ポイント: なぜ FF はテーブルの高さを尊重しないのですか? Chrome/Saf が行う場合、50% ルールですか?

更新: 境界線の折りたたみまたは境界線の間隔の修正を提案している人もいますが、これらのルールをテーブルに適用すると、次のようになります。 表のセルの赤い境界線は青い表の境界線と一緒に折りたたまれますが、緑の div の境界線にはまだ上下にスペースがあります。ブラウザの高さのサイズを変更して、何が起こるかを確認してみてください。

// 編集: ここでこのフィドルを参照してください: http://jsfiddle.net/hotu2n91/ご覧のとおり、これは最小限のテスト環境と同じ問題です。

ナビゲーションの配置に問題があります。あなたが読んでいる間、ここで問題を見ることができます: http://jsfiddle.net/vgugd8no/

ご覧のとおり、position:fixed;オーバーレイとナビゲーションも含まposition:fixed;れています。たとえば、ナビゲーションから 20px を削除しますが、100% のままにします。したがって、値は 100%-20px になります。これがbox-sizing:border-box;目的です。しかし、現在 FireFox では動作しないため、助けが必要です。コンテンツのスクロールバーと重ならないようにナビゲーションを調整したい。動作しないのはなぜbox-sizing:border-box;ですか?

次のソース コードを使用すると、2 つの問題があります。

1. そのままでは、最後の行を除いて、下の影は表示されません

   

2. 要素から要素にbackground-color:white;ステートメントを転送すると、「特別な」DIVを含む行の前のものを除いて、シャドウはどこでも機能します。TDTR

   

私が取り組んでいるアプリがテーブルを構築する方法を変更するのは非常に難しいので、DIV から special1 クラスと special2 クラスを移動することはできません。

どのような状況でもこのハイライトを機能させるにはどうすればよいですか?

ソースコード

縦横比が固定されたコンテナがあります。

最大幅とワックス高さの画像があります。画像はコンテナの境界内に含まれている必要があります。

Chrome では正常に動作しますが、Firefox では失敗します。

ここにフィドルがあります：http://jsfiddle.net/nqkpszxz/2/