ものぐさ父さんの子育て

HTML の複数ブラウザでの確認

HTML の複数ブラウザでの確認

ものぐさ父さんの子育て（楽天広場）を見に来て下さった、 みかんとバナナさん のホームページにお邪魔したところ、更新履歴がブログ日記の上にまで伸びて、表示が重なっていることに気がつきました。早速、掲示板でお伝えしたところ、みかんとバナナさんが修正してそれが直っているかどうかを確認するというやりとりが始まりました。

当時のみかんとバナナさんのトップページを Macintosh（Mac OS X 10.3.6） 上のウェブブラウザー Safari で表示したときの様子は、末尾のキャプチャー画像のようなものでした。

たまたま、出張中で暇だったのでソースを拝見させていただきました。私も最近までウェブデザインソフトしか使ったことがないので素人ですが．．．結論から言うと、みかんとバナナさんは、更新履歴を固定サイズのテーブルの中に表示して overflow-y を使ってスクロールされていました。この overflow-y が IE の独自仕様のため Safari では表示できないようです。楽天では、<IFRAME> を認めていなかったと記憶していますので、こちらは、解決方法がよく分かりません。やはり、IE だけをターゲットとするしかないのでしょうね。

その後、みかんとバナナさんはその日のうちに独自に解決方法を発見されました。現在では、更新履歴の部分は以下のような HTML で表示されています（一部ものぐさ父さんが改変してあります）。自分のトップページに使って見ましたが、きちんと表示されました。

<table>
	<tr>
	<td>
	<div align="left" style="
		BORDER-RIGHT: pink 1px solid; 
		BORDER-TOP: pink 1px solid; 
		OVERFLOW: auto; 
		BORDER-LEFT: pink 1px solid; 
		WIDTH: 300px; 
		LINE-HEIGHT: 1.5; 
		BORDER-BOTTOM: pink 1px solid; 
		HEIGHT: 57px
	">

	<IMG SRC="http://plaza.rakuten.co.jp/img/user/53/48/7245348/3.gif" 
width="13" height="10" alt="ハートアイコン"> 
	<font size=2>                     
	<a href="http://plaza.rakuten.co.jp/orangeandbanana/4000#suihannki"
>ガス炊飯器</a>
 	</font>
	<font size=1>2004/12/1</font>
	<br>

	<font size=2>                     
　　<a href="http://plaza.rakuten.co.jp/orangeandbanana/4000#raku-bann"
>ニュー・ラークバン</a>
 	</font>
	<font size=1>2004/11/27</font>
	<br>

	<font size=2>
	<a href="http://plaza.rakuten.co.jp/orangeandbanana/4000">ブラウン　
アクティベーター</a>
	</font>
	<font size=1>2004/9/22</font>
	<br>

	<font size=2>
	<a href="http://plaza.rakuten.co.jp/orangeandbanana/4000">ソニー　
スゴ録</a>
	</font>
	<font size=1>2004/9/22</font>
	</div>
	</tr>
	</td>
</table>

ポイントは、IE の独自拡張仕様というものが少なからずあるということです。上級者の方々には、当たり前なのかもしれませんが、複数のブラウザでの確認は必須でしょう。できれば、違うプラットフォームでの確認もしたいところですが．．．

少なくとも２種類のブラウザーでの表示を確認するのがベターでしょう。Windows なら、IE と Firefox （or Netscape）、Macintosh なら Safari と IE と Firefox あたりの確認は必要でしょう。

なお、現在レンタルサーバ上でウェブサイトを構築中ですが、CSS の解釈が IE とその他のブラウザでは大きく異なるようです。