ニコニコ大百科モバイル

7/2(月)よりスマホまたはPCでアクセスした場合、各デバイス向けのサイトへ自動で転送致します


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


ヨミ: ブラウザニヨルレイアウトノチガイ
掲示板をミル!
14カキコ!

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

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


事例目次


事例


(テーブルなどの)中央寄せ問題


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

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

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

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

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

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

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

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

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

この対処法は、上記記事の次のリビジョンで行われているが、とりあえずiframeの入る列の幅を大きく取っておくということになる。実際のところ、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

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


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


1.png 文章文章文章
文章文章文章
文章文章文章
[画像を見る] 文章文章文章
文章文章文章
文章文章文章


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

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


関連項目



最終更新日: 17/01/28 20:03
タグ検索 パソコン版を見る


[0]TOP
ニコニコ動画モバイル
運営元:ドワンゴ