スタイルシート -- どのブラウザでも同じように見えるようにするには

☆

要旨: 「チェリオメアリー」のけーきさんに、当「観測気球」を Maciotosh のいろんな Webブラウザ で表示させたときのスクリーンショットを取得していただいた。実際に見てみると、確かにブラウザによって、見え方が全然違う。

関連記事: 戦うスタイルシート

• Safari 1.0
  記事本文、サイドバーとも幅が狭い。width: の指定が期待とおりに作用していない模様。サイドバー折りたたみはちゃんと閉じた状態で表示されているので、DOM 関連の問題はない? (閉じたまま、開かなかったりするのかもしれません。ちょっと不安)
  タイトル/サブタイトル部分の画面サイズに応じて伸び縮みする背景画像はちゃんと実現できている模様。
  Safari 1.2 ではどういう見え方になるのかも気になるところ。
• ｏｍｉｎｉweb 5.0 beta2
  サイドバーのみ幅が狭い。width: auto; じゃ駄目なのかな?
• Opera 6.0.2
  DOM が全く作用していない(したがって、ココログで用意されているデフォルトのスタイルシートがそのまま適用される)。Windows版IE6.0 で JavaScript 機能をオフにして見たときと同じ見え方。
  Opera に関しては、新しいバージョン(7.x といっても 7.2x 以降じゃないと駄目かも?)なら大丈夫なのではないか、と思います。
• Internet Explorer 5.2
  サイドバー折りたたみの JavaScript はそれなりに動いている(<h2> ～ </h2> で囲んだ部分が文字化けしてます)ようですが、スタイルシート上書き JavaScipt は全く作用していないようです。デフォルトのスタイルシートと Mac IE の不完全なDOM機能があいまって、他のブラウザでは再現しにくい画面になっています。
• Firefox 0.8
  概ね期待とおりの見え方をしています。width: と overflow: の相互作用のせいなのか、LinkList 部分では横方向のスクロールバーが出ています。縦方向のスクロールバーだけが出ることを狙ってるんですが。これは width: の値を調整することで解決できると思います。他のブラウザに比べると問題は軽微。

先の記事のコメントで書いたように、マイリスト埋め込み文字列の修正により、手元にある Windows 版の IE6.0 と Opera 7.23 では期待通りの見え方をしています。修正を行なう前は、Opera 7.23 で見ると、「+」マークが BlogPeople、MyblogList それぞれの左上に表示されていました。あと width: の調整により、Opera 7.23 でも、画面サイズに関係なく、どんな場合も横スクロールバーが出ないようになりました。

どういう対応をしたのかというと。マイリスト埋め込み文字列を以下のように修正しました。

• 修正前
  • 項目1

    </li></ul> <div class="bloglist" style="position: relative; top: -40px;"> <h3>BlogPeople</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/javacode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/joincode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script></div></div> <ul><li style="display: none;">

  • 項目2

    </li></ul> <div class="bloglist" style="position: relative; top: -50px;"> <h3>MyblogList</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" charset="EUC-JP"></script> </div></div> <ul><li>

• 修正後
  • 項目1

    </li></ul></div> <div class="bloglist" style="position: relative; top: -40px;"> <h3>BlogPeople</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/javacode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script> <script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/joincode_utf8.jsp?key=xxxxxxxxxxxxxxxx"></script></div></div> <ul><li style="display: none;">

  • 項目2

    </li></ul> <div class="bloglist" style="position: relative; top: -50px;"> <h3>MyblogList</h3> <div class="listing"> <script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js?code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" charset="EUC-JP"></script> </div></div> <div class="sidebar"><ul><li>

マイリストに埋め込む文字列を考えるのは、やっぱりパズルですね。最終的にどういうソースになるか、頭に描けてないと、なかなか最適な答えが出てきません。