.
browser による表示の違いを
browser による表示の違いを
スタイルシートで補正する
スタイルシートで補正する
<body>タグのブラウザ表示の違い
オペラ以外のブラウザは
ブラウザの端と<body>タグの端に隙間がある
オペラは
<body>タグの端と<body>タグの中に表示される要素の端に隙間がある
赤枠と緑枠部分
mac safari

ブラウザ別表示
mac netscape

mac internet explorer

win opera

win netscape

win internet explorer

リストタグのブラウザ表示の違い
下記のソ−スを各ブラウザで表示させたもの
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を +[A]で全選択して、コピーできます
ブラウザ別表示
mac safari
mac netscape
mac internet explorer
win netscape
win mozilla
win firefox
win opera
win internet explorer
スタイルシート padding 指定時のブラウザ表示の違い
幅を指定した枠に
padding を指定するとブラウザによって表示が違う
回避する為に
幅を指定した枠の中に新たに padding を指定する枠を入れる
背景黄色の部分 
<div style="width:200px;padding:20px;background:yellow;">
	width:200px;
</div>
背景青色の部分 
<div style="width:200px;">
	<div style="padding:20px;background:blue;">
		width:200px;
	</div>
</div>

width:200px;
width:200px;

ブラウザ別表示
mac safari
mac internet explorer

mac netscape
win netscape

win opera
win internet explorer

スタイルシート border 指定時のブラウザ表示の違い
幅を指定した枠に
border を指定するとブラウザによって表示が違う
回避する為に
幅を指定した枠の中に新たに border を指定する枠を入れる
枠線黄色の部分 
<div style="width:200px;border:yellow solid 20px;">
	width:200px;
</div>
枠線青色の部分 
<div style="width:200px;">
	<div style="border:blue solid 20px;">
		width:200px;
	</div>
</div>

width:200px;
width:200px;

ブラウザ別表示
mac safari
mac internet explorer

mac netscape
win netscape

win opera
win internet explorer

<table>タグにおいて border padding 指定時のブラウザ表示の違い
<table>に幅を指定
<table>の幅は指定通りになる
<table>に幅を指定しないで<td>に幅を指定
<td>指定幅は border padding の幅を除いたものになる
table1
<table>幅を指定
width:200px;
枠を黄色
border:yellow solid 10px;
<td> との隙間
padding:10px;
<td>幅を指定しない
 
枠を青色
border:blue solid 10px;
文字との隙間
padding:10px;

table2
<table>幅を指定
width:200px;
枠を黄色
border:yellow solid 1px;
<td> との隙間
指定しない
<td>幅を指定
width:100px;
枠を青色
border:blue solid 10px;
文字との隙間
padding:10px;

table3
<table>幅を指定しない
 
枠を黄色
border:yellow solid 1px;
<td> との隙間
指定しない
<td>幅を指定
width:100px;
枠を青色
border:blue solid 10px;
文字との隙間
padding:10px;


table1

table2
left
table2
right

table3
left
table3
right

ブラウザ別表示
mac safari
mac internet explorer

mac netscape
win netscape

win opera
win internet explorer

<fieldset>タグのブラウザ表示の違い
  • デフォルトではブラウザによって表示が違う
  • style="margin:0px;padding:0px;"
  • <fieldset>タグに上記を指定することによって同じ様な表示に
  • 背景部分にブラウザ間の違いがあるので背景画像を貼る時は位置に注意
  • padding-top 部分に表示の違いが見られる
表示確認 1
外の要素（赤枠）の左右に隙間がある
style="margin:0px;" を指定
表示確認 2
中の文字と枠の間（黒枠）に隙間がある
style="margin:0px;padding:0px;" を指定
表示確認 3
背景部分（ピンク部分）にブラウザ間の違いが見られる
背景画像を貼る時は位置に注意が必要
表示確認 4
style="margin:0px;padding:0px;padding:20px;" を指定
padding-top 部分に表示の違いが見られる
表示確認 1 style="background:pink;"
外の要素（赤枠）の左右に隙間がある
表示確認 2 style="background:pink;margin:0px;"
中の文字と枠の間（黒枠）に隙間がある
表示確認 3 style="background:pink;margin:0px;padding:0px;"
背景部分（ピンク部分）にブラウザ間の違いが見られる
表示確認 4 style="background:pink;margin:0px;padding:0px;padding20px;"
padding-top 部分に表示の違いが見られる
ブラウザ別表示
mac safari
mac internet explorer

mac netscape
win netscape

win opera
win internet explorer

win IE だけ表示する、非表示にする
win IE だけ表示する
↓枠の中の文字は見えない
↑枠の中の文字は見えない
↓上の記述 
<!--[if IE 6]>
この部分はモジラ系ブラウザでコメントアウトされて表示されない
<![endif]-->
win IE
linux firefox 等他ブラウザ

win IE だけ非表示にする
win IE で赤枠の中の文字が表示されるか？
linux,mac,win どのOSでも ブラウザ firefox(火狐)を使ってみれば
ブラウザ インターネットエクスプローラーを使う気にならないね。
デフォルトでインストールされてるものだけを使うのはどうかな。
デフォルト(default)の意味が解れば・・・。
win IE 以外のブラウザでは表示されている。
↓上の記述 
<div style="border:red solid 1px;">

	<div style="height:3em;"></div>
	
	<!--[if IE 6]>
	<div style="display:none;">
	<![endif]-->
	
		linux,mac,win

		どのOSでも ブラウザ firefox(火狐)を使ってみれば

		<div style="height:3em;"></div>

		ブラウザ インターネットエクスプローラーを使う気にならないね。

		<div style="height:3em;"></div>

		デフォルトでインストールされてるものだけを使うのはどうかな。

		<div style="height:3em;"></div>

		デフォルト(default)の意味が解れば・・・。
	
	<!--[if IE 6]>
	</div>
	<![endif]-->
	
	<div style="height:3em;"></div>

</div>
win IE
linux firefox 等他ブラウザ