ブラウザによるレイアウトの違い

本記事では、ニコニコ大百科の記事でしばしば見られるような、ウェブブラウザの違いによってレイアウトが崩れたり自分の想定と異なる表示になったりする事例を取り上げる。記事編集の際にはこれらの事例を参考にすることで、別のブラウザの人が問題なく閲覧できるように少しでも心がけることが出来るだろう。

※情報を常に募集しています。編集者が勘違いしていることもあるので、どしどし掲示板で指摘するなり編集を加えるなりして、情報を共有しましょう。

事例目次

• （テーブルなどの）中央寄せ問題
• （テーブルなどの）widthの測り方の違いによる問題
• 擬似ほめるボタン問題

事例

（テーブルなどの）中央寄せ問題

おそらく、ブラウザによるレイアウトの違いの最も顕著な例。

ニコニコ大百科のHTMLエディタでテーブルを作るアイコンがあり、ここで「配置」として『中央揃え』などの指定をすることが出来る。実際のソースではtable align="center"などとなっている。しかし残念ながら、ニコニコ大百科ではこの指定を使ってもIE以外のブラウザで中央寄せが効かない。

これは、ニコニコ大百科の基本CSSにおいて、tableにmargin: 0の指定がかかっているためである。IE以外のブラウザではそのスタイルシートが優先されるため、中央寄せが効かなくなっている。したがって、それを上書きするような形で、table style="margin: auto"の指定が必要である。IE以外のブラウザでは、テーブルの中央寄せにはこの指定を行うことが一般的。

逆に、IEを見捨ててtable style="margin: auto"の指定しかしていないという場合もある。この指定はIEでは何も起こらないので、中央寄せに意味がある記事なのであればalign="center"の指定を付け加えてあげるべきだろう。

まとめると、各種ブラウザでテーブルを中央寄せするためには、table align="center" style="margin: auto"と併記するのがよい。

（テーブルなどの）widthの測り方の違いによる問題

まずはこちらをご覧ください。→ 「MCアリカ」：リビジョン103732

FirefoxやOpera・IE8などでは問題ないが、IE7までのInternet Explorer（Windows）では「ディスコグラフィー」の項目のテーブルが崩壊しているはずである。ここで問題だったのは、動画サムネイル部分のiframeのwidthが312であり、そのタイトル列に指定されたwidthが320であったということである。

ニコニコ大百科の基本CSSにおいては、デフォルトでtdのpaddingが5pxつくようになっている。それはどのブラウザでも共通であるが、そのpaddingが含まれる場所がWin IE7までとそれ以外で異なるというのが問題となる。

Win IE7までの場合、widthにpaddingが含まれる。それ以外のブラウザでは、widthにpaddingは含まれない。

つまり上記の例では、Win IE7までの場合本文に割り当てられる実際の幅は320-(5*2)=310pxとなっている。これがiframeの幅より小さいため、テーブル崩壊を招いているのである。

この対処法は、上記記事の次のリビジョンで行われているが、とりあえずiframeの入る列の幅を大きく取っておくということになる。実際のところ、widthの計算はpaddingのみならずborderの太さもごちゃごちゃと関わってくる問題なので、テーブルにぴったり合わせようと考えるのは大変面倒である。そもそも、他のブラウザでは測り方が異なっているため、見た目を合わせるためには更なる工夫が必要である。

擬似ほめるボタン問題

ニコニコ大百科：HTMLテンプレート集に擬似ほめるボタンのソースが書かれているが、現状ではブラウザによってズレが発生している。IEでは正しく表示されているようである。

※対策等のわかる人いたら追記お願いします。

ニコニコ大百科:素材集

関連項目

• ブラウザ
• ニコニコ大百科：編集者向けのページ