下記のソースを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>
No.3ベストアンサー
- 回答日時:
>>Q
> どちらの解釈が正しく
結果だけを見ればどちらも特に間違った解釈をしているわけではない。
CSS2仕様書邦訳 表の高さのアルゴリズム
http://www.y-adagio.com/public/standards/tr_css2 …
>>ANo.1補足
> 下記のソースでは、IEの場合、見た目の幅が200px以下 -100px程度- に縮められたいるようです。なぜでしょうか。
どのように書いているかわからないのでなんともいえないが、おそらく下記の関係による。
CSS2リファレンス ボックスの概要と寸法
http://hp.vector.co.jp/authors/VA022006/css/box. …
CSS2リファレンス 'width','height' を算出するための実装方法
http://hp.vector.co.jp/authors/VA022006/css/visu …
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 …
No.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の枠になります
No.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だとギリギリなので描画的に期待通りにならない可能性が有るのはどうにもならない
この回答への補足
はい、どうもありがとうございます。
Firefoxの解釈が正しいらしいということは分かりましたが。
下記のソースでは、IEの場合、見た目の幅が200px以下 -100px程度- に縮められたいるようです。なぜでしょうか。
<div style="width:200px;height:400px;border:0px"><!-- 確実に大きさを確保 -->
<div style="width:100%;height:100%;border:solid 50px"></div>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlソース編集で、各タグを何...
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
iPhoneで HTMLファイルを閲覧
-
テーブルタグのセルの幅の一部...
-
スマホでHTMLファイルを開いて...
-
URLにアクセスした際に指定した...
-
アコーディオンメニューが思う...
-
CSSファイルの日本語コメントが...
-
CSSが上手く反映されないみたい...
-
コードを書いて下さい( ; ; )...
-
CSSデータの作成方法について(...
-
htmlで<form>~</form>を並べて...
-
HTML入門でもう躓いてしまった。
-
青い枠のみのHTML
-
スマホ(android)のタッチパネ...
-
HTMLですCSSです 画像のように...
-
、URL化させるにはどうしたらい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報