【このページ内のトピック： 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
| 注１： |
「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。 |
| 注２： |
ブラウザ名で特に指定が無いものはWindows版についての記述です。 |
| 注３： |
スタイルシートについては、特に断りの無い限り互換モードについての記述です。 |
多くのブラウザでは 、タグの中身や指定されたオプションによっては
<table>や<td>で指定したwidth値が反映されません。
セルの中身に長い英単語が含まれる場合(IE4)
例えばテーブルセル内にアルファベットを使った長い文字列
(スペース等を含まない)がある場合、
日本語と異なり自動改行がなされません。
そのためセルの指定幅を超えることがあります。
【長い英単語を含む場合セル幅指定が反映されず(IE4-6,NS4-7,Opera6-7)】
<table><tr><td width="200">...</td></tr></table>
 |
|
| ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$^&*_=;:?,. |
|
下記の様にURLをページ内に記述した場合には
この現象が頻発するので注意します。
【長いURLを含む場合セル幅指定が反映されず(IE4-6,NS4,NS6-7)】
<table><tr><td width="200">...</td></tr></table>
|
|
| http://www.keynavi.net/somewhere/you/want/to/go.html |
|
Opera6-7では幅が超過する場合スラッシュの所で改行してくれるようです。
長いURLは小さ目の文字で表示させたり 途中で改行を入れるといいでしょう。
幅指定をcolspan指定と組合わせた場合
【colspan指定と組合わせた場合 テーブルのセル幅指定が反映されず(IE4-6,NS4,Operaなど)】
<table><tr><td width="200" colspan="2">...</td><td>...</td></tr>...</table>
|
|
| width=200 |
指定無 |
| 指定無 |
width=200 |
| 指定無 |
width=100 |
指定無 |
|
NS6,7では上の例はきちんと処理されるようです。
上の例では各セルでのwidth値を使って
「w1+w2=200; w2+w3=200; w2=100;」
の連立方程式を解くことになるのですが
表示速度優先 (テーブル全体が読み終わる前から表示を開始する)
のため？ に曖昧に処理されているようです。
そこで 1行目に全てのセルの幅を直接指定した行を追加すると揃うようです。
【各セルの幅を指定する行を１行目に追加して解決】
<tr><td width="100">...</td><td width="100">...</td><td width="100">...</td></tr>
|
|
| width=100 |
width=100 |
width=100 |
| width=200 |
指定無 |
| 指定無 |
width=200 |
| 指定無 |
width=100 |
指定無 |
|
上の例では分かりやすいよう枠線を表示(border=1)しているので
結果的に幅が少し大きめになっています。
実際に使用するときは border値を考慮してwidth値を指定するか
border=0にするなど調整して下さい。
ウィンドウを小さくした場合
またウィンドウをリサイズして幅を小さくすると セルの幅がwidht指定値より
小さくなることがあります。
これを避けるには 1x1の透明GIF画像(tomei.gif)を用意して
画像タグ「<img src="tomei.gif" width="200" height="1" border="0">」
をセル内に配置し 幅を確保します。
殆どのブラウザで <form>の前、</form>の後に空行ができるようです。
【formタグの前後に空行ができる (このページを様々なブラウザで表示させ確認して下さい)】
<form><input type="text"></form>
比較的新しいブラウザではスタイルシートを使って
「<form style="margin:0px;">」
とすれば空行が生じるのを防げますが IE3,NS3,4ではその方法が効きません。
【新しいブラウザでは formタグに style="margin:0px;"を追加すれば空行できず】
<form style="margin:0px;"><input type="text"></form>
古いブラウザにも対応したい場合は 例外的な記述になりますが、
テーブルを使い <form>を
<tr>の前(</form>は</tr>の後)、乃至は
<td>の前(</form>は</td>の後) に置きます。
【<form>を<tr>の前後に書けば古いブラウザでも空行できず】
<table>...<form style="margin:0px;"><tr><td><input type="text"></td></tr></form>...</table>
フォームオブジェクト
(<input type=text size=...>, <textarea cols=... rows=...>)の大きさは
同じオプション値を与えても ブラウザによって異なります。
そこで
サイズをピッタリ合わせたい場合はスタイルシートで直接 大きさを指定します。
しかしながら NS4(IE3も)ではスタイル指定が反映されないので
sizeやcols,rows値も指定しておく必要があります。
幸い IE4+,NS6+ではスタイル指定の方が優先されるので
両方指定しておき size,cols,rows値はNS4に合ったものにしておきます。
ここではNS4のフォームサイズに合わせていますが 必要ならIE3に合わせたり
両者の中間のサイズにしてもいいでしょう。
【実際のフォームサイズとNS4のオプション値(デフォルト時)との対応】
| タグとオプション |
オプション値→実サイズ |
実サイズ→オプション値 |
| <input type=text size=...> |
width=7*size+12 |
size=(width-12)/7 |
| <textarea cols=... > |
width=7*cols+22 |
cols=(width-22)/7 |
| <textarea rows=... >(横スクロールバー有) |
height=13*rows+30 |
rows=(height-30)/13 |
| <textarea rows=... >(横スクロールバー無) |
height=13*rows+15 |
rows=(height-15)/13 |
上記はWindows版NS4について
目分量で決めた式なので厳密に正しいわけではありません。
目安として使って下さい。
【size,width両方指定し NS4で見てもほぼ同じ大きさに:width=7*30+12】
<input type="text" size="30" style="width:222px;">
【cols+rows, width+height両方指定し NS4で見てもほぼ同じ大きさに:width=7*30+22, height=13*3+15】
<textarea cols="30" rows="3" style="width:232px; height:54px;" wrap="physical">...</textarea>
但しNS4の場合は ユーザが文字のサイズを大きくすると
フォームオブジェクトも大きくなるという問題は残ります。
なお NS6,NS7では文字サイズ変更時に
スタイルシートで固定したフォームの大きさは変わりませんが
内部の文字のサイズは変わります。
一方、IE3-6では両方とも固定されるようです。
実験ページ：フォームオブジェクトのサイズ
IE3.0の場合の計算式についてもこちらを参照してみてください。
フォームの各種タグ(<select>,<input>,<textarea>)は
<form>内に配置しないとNetscape4では表示されません。
【<form>タグはNS4では必須】
<form><select><option></select><input type="text"><textarea></textarea></form>
NS4ではテーブルセル(<td>...</td>)
の中身が空だと 背景色、背景画像の指定が反映されません。
【テーブルセルの中身が空だと背景色、背景画像の指定を無視(NS4では空白に)】
<td bgcolor="cyan" width="100" height="20"></td><td background="css/haikei.jpg" width="100" height="20"></td>
対策として1x1の透明Gif画像をtdセルの中身に追加します。
【1x1の透明Gif画像をtdセルに追加して解決】
...<td bgcolor="cyan" width="100" height="20"><img src="tomei.gif" width="1" height="1" border="0"></td>...
テーブルを重ねる時には背景色(bgcolor)、背景画像(background)の指定に
注意が必要です。
Netscape 4.xでは予想外の表示がなされることがあります。
【親テーブルの背景画像が各セルに個別に貼られてしまう(NS4)】
...<td background="tori.jpg"><table border="1"><tr><td>abcdef</td>...
具体的には親テーブルで背景画像が指定されている時に
子テーブルで以下のような現象が起きます。
背景指定は <table>、<td>の両方に対して行えますが
いずれの場合でも発生するようです。
|
|
 |
親テーブルの背景画像が各セルに貼られる |
|
背景色指定(bgcolor=...)を無視
|
|
これらは テーブルセルの背景に透明Gif画像を指定すれば解決します。
【透明Gifをbackgroundに指定して解決】
...<td background="tori.jpg"><table border="1"><tr><td background="tomei.gif">abcdef</td>...
しかしながら親の親以上のテーブルで背景色が指定されていると
その色で塗られてしまいます。
【親の親のテーブルに背景色が指定されているとその色(cyan)で塗られる(NS4)】
...<td bgcolor="cyan"><table><tr><td background="tori.jpg"><table><tr><td background="tomei.gif">abcdef</td>...
これらの現象は tableタグだけではなく divタグを使った場合も発生します。
【divが子要素の場合も親テーブルの背景画像が貼られてしまう(NS4)】
...<td background="tori.jpg"><div style="border:outset thin; padding:10px; width:200px;">abcdef</div></td>...
背景画像を指定する時には子要素の背景をどうするか配慮が必要です。
結果的にデザイン上大きな制約になるので苦労してます :-(
ホーム [0] 
HTML,CSSバグ＆回避法リスト
