みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

<html>
<head>
<style type="text/css">
table
{
border-collapse : collapse;

}
td
{
text-aligh : left;
vertical-align : top;
padding : 0px;
border-style : solid;
border-width : 100px;
border-color : #cccccc;
width : 200px;
height : 400px;
background-color : #ff0000;
}
</style>
</head>
<body>
<table>
<tr>
<td>
text.text.text.text.<br />
text.text.text.text.<br />
text.text.text.text.<br />
</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2007-07-06 12:28:04

QNo.3144003

すぐに回答ほしいです

質問者が選んだベストアンサー

>>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

投稿日時 - 2007-07-07 11:58:42

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

こんにちは

確かにブラウザごとに違うみたいですね

【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

この3つで同じように表示するには以下のようにしてみてください

<style type="text/css">
table {
border-style : solid;
border-width : 100px;
border-color : #cccccc;
width : 400px;
height : 600px;
background-color : #ff0000;
}
td {
text-align : left;
vertical-align : top;
padding : 0px;
}
</style>

>-100px程度- に縮められたいるようです。なぜでしょうか。
IEだけではないのですが・・・
上のdivで幅を200pxに設定してあってそこからborder分(100px)を引いているので表示されてるのは100px*300pxの枠になります

投稿日時 - 2007-07-06 14:06:56

ANo.1

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

<div style="width:200px;height:400px;border:0px"><!-- 確実に大きさを確保 -->
 <div style="width:100%;height:100%;border:solid 50px"></div>
</div>

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

投稿日時 - 2007-07-06 12:58:44

補足

はい、どうもありがとうございます。
Firefoxの解釈が正しいらしいということは分かりましたが。
下記のソースでは、IEの場合、見た目の幅が200px以下 -100px程度- に縮められたいるようです。なぜでしょうか。

<div style="width:200px;height:400px;border:0px"><!-- 確実に大きさを確保 -->
 <div style="width:100%;height:100%;border:solid 50px"></div>
</div>

投稿日時 - 2007-07-06 13:12:50

あなたにオススメの質問