ブラウザによるレイアウトの違いとは (ブラウザニヨルレイアウトノチガイとは) [単語記事]

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

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

事例目次

（テーブルなどの）中央寄せ問題
（テーブルなどの）widthの測り方の違いによる問題
safariでの画像のズレ問題
テーブルで画像と並んだ文章がずれる問題

事例

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

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

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

これは、ニコニコ大百科の基本CSSにおいて、tableにmar gin: 0の指定がかかっているためである。IE以外のブラウザではそのスタイルシートが優先されるため、中央寄せが効かなくなっている。したがって、それを上書きするような形で、table style="mar gin: auto"の指定が必要である。というか、ニコニコ大百科ではこの指定さえあればalign="center"は無くてもだいたいのブラウザで大丈夫なようである。一応DOCTYPE宣言とかが関わっているので気になる人は自分で調べるべし。

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

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

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

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

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

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

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

safariでの画像のズレ問題

下記の記事リビジョンのレイアウトをsafari3.2とFirefox3.0とで見比べると、safariではtableの中の動画サムネイル画像の位置がずれている。（環境: Mac OS X 10.4.11 tiger）

https://dic.nicovideo.jp/r/v/sm6948321/274142

対策として、サムネイルのリンクの前に （明示的な半角スペース）を入れるとずれない。下記のリビジョンでは修正されている。

https://dic.nicovideo.jp/r/v/sm6948321/274152

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

テーブルで画像と並んだ文章がずれる問題

文章文章文章
文章文章文章
文章文章文章

上記左のテーブルは、IE7までのInternet Explorerなどでは特に違和感が無いが、Firefoxなどブラウザによっては画像の下端から右のセルの文章が始まっており、大変かっこ悪いことになっている。これは画像に限らずif rameの場合にも発生する問題で、上のテーブルがずれているブラウザでは、涼宮ハルヒ：リビジョン60213のキャラクターソング部分もずれているはずである。

これは、ニコニコ大百科の基本CSSでimgやif rameタグについてvert ical-align: baselineという指定がされており、IE7までは画像の下端と文章全体の下端を合わせているのに対し、ずれるブラウザでは画像の下端と文章の先頭を合わせているということが原因である。対策としては、文章を書くセルに関してtd style="vert ical-align: bot tom"などの指定をすることで、上記右のようにレイアウトすることができる。td style="vert ical-align: top"と指定すれば文章をセルの一番上から始めることができる。