編集  

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

ブラウザニヨルレイアウトノチガイ

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

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

事例目次

事例

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

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

ニコニコ大百科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 文章文章文章
文章文章文章
文章文章文章
1.png 文章文章文章
文章文章文章
文章文章文章


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

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

関連項目


【スポンサーリンク】

スマホ版URL:
https://dic.nicovideo.jp/t/a/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%82%88%E3%82%8B%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E9%81%95%E3%81%84
ページ番号: 3097229 リビジョン番号: 2453559
読み:ブラウザニヨルレイアウトノチガイ
初版作成日: 09/05/09 17:22 ◆ 最終更新日: 17/01/28 20:03
編集内容についての説明/コメント: 関連項目に「ニコニコ大百科:HTML各要素のデフォルトCSS」を追加しました。
記事編集 / 編集履歴を閲覧

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

ブラウザによるレイアウトの違いについて語るスレ

5 : ななしのよっしん :2009/05/10(日) 05:53:31 ID: x3czt37Rm2
table align="ほにゃらら"はむしろFirefoxで効いてIEで効いてなかったような?
だからいつもdivで囲ってからやってたよ。記憶違いだったらスマソ

あと疑似ほめるボタン3月6日投稿動画←みたいに
tableでやったらFirefoxでもズレくなったよ、他は確認してないけど
6 : ななしのよっしん :2009/08/27(木) 19:20:20 ID: rWAsFl63Py
擬似ほめるボタンは「ニコニコ大百科:HTMLテンプレート集」の掲示板レス37ソース提示してくれてるよね。
ブラウザによってはアレでも駄ん?
7 : ななしのよっしん :2009/09/25(金) 20:49:37 ID: 3TDxrQL53a
ニコニコ大百科:タグ一覧では
テーブルにおいて
tdとtrでstyle属性が利用可、となっていますが
IE8のみうまくいきません。

IE8だと
<table>
<tbody>
<tr style="background-color: #0000ff;">
<td>ほにゃらら</td>
<td>ほにゃらら</td>
</tr>
(省略しています。全て読むにはこのリンクをクリック!)
8 : ななしのよっしん :2009/09/25(金) 20:50:45 ID: 3TDxrQL53a
あちゃー、スペースで字下げしたのに消えちゃった。
読みにくくて申し訳ない。
9 : ななしのよっしん :2010/01/19(火) 15:56:10 ID: hLdyrCt3MW
<pre>や<code>を使うと、ブラウザによって大幅に字幅が変わるようだ(具体例 ニコニコ大百科:お知らせ表示の一覧
IEがでかくてchromeは小さくfirefoxは中間くらいの大きさになる。長いソースコード書くときは使わない方がよさそう。

あと、chrome使ってると、まだ5文字くらい入るのに自動改行されることがしょっちゅうあるんだが、これはchromeが悪いのか?
10 : ななしのよっしん :2010/08/26(木) 07:39:43 ID: ycCwJ5rVgl
禁断の入れてるとどうしても崩れる
11 : ななしのよっしん :2011/01/01(土) 02:52:44 ID: q5arBPfXia
>>7
久々に確認したら解決してました
12 : ななしのよっしん :2011/05/07(土) 10:26:59 ID: cajxSTyu1r
「vertical-align: baseline」のような、ニコニコ大百科の基本CSSについて
どこかにまとめたいんだけど、この記事に書いてもよいものかな?
見出しタグを付けたときにの下線がついて四背景画像がついて…みたいな一覧
13 : ぎみっく :2011/05/08(日) 04:20:59 ID: b3N+xeTY0b
>>12

やるなら、新規記事でやるべきだと思う。

各記事に散らばってるのもまとめる感じで
大百科の基本CSSは各ブラウザの機使ってひろってもいいし
CSSファイル見て分かるなら、そこからまとめてもいいし。

大百科で使えるものは、宮城さんが前にユーザ記事めてくれてたから
それを基に検してけばおkだと思う。

現行のブラウザだと、ほぼ狙い通りの挙動をしてくれるけど、
(省略しています。全て読むにはこのリンクをクリック!)
14 : ななしのよっしん :2012/11/27(火) 17:47:01 ID: hYyNqTScKc
IEFirefoxだと半文字(英数字)に使われてるフォントが違う。
ちなみにwin7
急上昇ワード
ニコニコニューストピックス