cssでborderを設定した場合のブラウザによる内容の余白の潰しについて。

Question

下記のソースをIEとFirefoxで表示した場合、IEではheightの値からborderの値を二倍した200pxが -つまり 400px-200px=200px　- 見た目の高さとして返されますが、Firefoxの場合、heightの値からborder-widthの高さそのものである100pxだけ引かれ、見た目の高さは300pxになります。どちらの解釈が正しく、またどのブラウザでも同じように表示されるよなheightの最小値の設定のしかたはあるのでしょうか？

text.text.text.text.
text.text.text.text.
text.text.text.text.

key-child · Accepted Answer

>>Q
> どちらの解釈が正しく

結果だけを見ればどちらも特に間違った解釈をしているわけではない。

CSS2仕様書邦訳　表の高さのアルゴリズム
http://www.y-adagio.com/public/standards/tr_css2/tables.html#height-layout


>>ANo.1補足
> 下記のソースでは、IEの場合、見た目の幅が200px以下 -100px程度- に縮められたいるようです。なぜでしょうか。

どのように書いているかわからないのでなんともいえないが、おそらく下記の関係による。

CSS2リファレンス　ボックスの概要と寸法
http://hp.vector.co.jp/authors/VA022006/css/box.html?jouyou_l#introduction-box
CSS2リファレンス　'width'，'height' を算出するための実装方法
http://hp.vector.co.jp/authors/VA022006/css/visualren.html?jouyou_l#ref-width-height
World Wide Web Guide　!DOCTYPE スイッチ
http://w3g.jp/others/data/doctype_switching


>>Q
> どのブラウザでも同じように表示されるよなheightの最小値の設定のしかたはあるのでしょうか？

まずは表なのかどうかという点。表ではないならtable要素は使わない。表なら、高さについてはあきらめた方がよさそう。

div要素などで書く場合は標準準拠モードになるように書けばある程度そろえることができる。


最後に、
表の枠線を結合させ(border-collapse: collapse;)、その線が極端に太い場合はマージンの開始位置に注意が必要かも。
（Firefox・標準準拠モードで確認可）

CSS2仕様書邦訳　境界つぶしモデル
http://www.y-adagio.com/public/standards/tr_css2/tables.html#collapsing-borders

leap_day · Answer

こんにちは確かにブラウザごとに違うみたいですね【IE】 border(all):100px td contents:400px*200px 【Firefox】 border(top;left):50px border(right;bottom):100px; td contents:300px*200px 【Opera】 border(all):100px td contents:300px*200px この３つで同じように表示するには以下のようにしてみてください >-100px程度- に縮められたいるようです。なぜでしょうか。 IEだけではないのですが・・・上のdivで幅を200pxに設定してあってそこからborder分(100px)を引いているので表示されてるのは100px*300pxの枠になります

noname#39970 · Answer

firefoxが正しいと言われている。しかし両方で対応するためにはIEとで切り替えるかバッドノウハウ的に下のようなくくりかたをする必要がある

どちらの解釈であっても外側がサイズ固定なのでそれを突き破る場合の設定(overflow)にさえ気をつければ良くなる。外枠が200pxで内枠が100pxだとギリギリなので描画的に期待通りにならない可能性が有るのはどうにもならない

cssでborderを設定した場合のブラウザによる内容の余白の潰しについて。

>>Q

こんにちは

firefoxが正しいと言われている。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング