beginners005_HTML の複数ブラウザでの確認（ウェブブラウザーの互換性の問題例）（アフィリエイト入門）

【国内最大級の一括告知サービス！ ホームページの集客には「PRJAPAN」！ 】

超初心者向けアフィリエイト入門
～楽天で始めるアフィリエイト～

beginners005_HTML の複数ブラウザでの確認（ウェブブラウザーの互換性の問題例）

日付: 2004年11月30日火曜日
時間: 9:10:07
題名: beginners005_HTML の複数ブラウザでの確認（ウェブブラウザーの互換性の問題例）

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

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

問題点

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

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

解決方法

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

問題解決後の 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>

問題解決後の表示例

ガス炊飯器 2004/12/1
ニュー・ラークバン 2004/11/27
ブラウン　アクティベーター 2004/9/22
ソニー　スゴ録 2004/9/22

結論

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

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

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

みかんとバナナさんトップページのキャプチャー画像（解決前）

子育て広場　Proud Parents
親ばかによる親ばかのための親ばかサイト www.nexcite.rdy.jp/pp

アフィリエイトでざっくざく

超初心者向けアフィリエイト入門
～楽天で始めるアフィリエイト～