HTML の複数ブラウザでの確認HTML の複数ブラウザでの確認ものぐさ父さんの子育て(楽天広場)を見に来て下さった、みかんとバナナさんのホームページにお邪魔したところ、更新履歴がブログ日記の上にまで伸びて、表示が重なっていることに気がつきました。早速、掲示板でお伝えしたところ、みかんとバナナさんが修正してそれが直っているかどうかを確認するというやりとりが始まりました。 問題点当時のみかんとバナナさんのトップページを Macintosh(Mac OS X 10.3.6) 上のウェブブラウザー Safari で表示したときの様子は、末尾のキャプチャー画像のようなものでした。 たまたま、出張中で暇だったのでソースを拝見させていただきました。私も最近までウェブデザインソフトしか使ったことがないので素人ですが... その後、みかんとバナナさんはその日のうちに独自に解決方法を発見されました。現在では、更新履歴の部分は以下のような 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> 問題解決後の表示例 結論 ポイントは、IE の独自拡張仕様というものが少なからずあるということです。上級者の方々には、当たり前なのかもしれませんが、複数のブラウザでの確認は必須でしょう。できれば、違うプラットフォームでの確認もしたいところですが... 少なくとも2種類のブラウザーでの表示を確認するのがベターでしょう。Windows なら、IE と Firefox (or Netscape)、Macintosh なら Safari と IE と Firefox あたりの確認は必要でしょう。 なお、現在レンタルサーバ上でウェブサイトを構築中ですが、CSS の解釈が IE とその他のブラウザでは大きく異なるようです。 みかんとバナナさんトップページのキャプチャー画像(解決前) ジャンル別一覧
人気のクチコミテーマ
|