スタイルシート IE と Firefox での違い

スタイルシート について、IE と Firefox で表示が異なる点をまとめ、解決策も提示します。

■ ブロックレベル要素(テーブルやdiv要素など)のセンタリング
IE は、ブロックレベル要素の親で、text-align:center を指定することでOKだが、Firefox では NG。
Firefox では、ブロックレベル要素自身で、margin:0 auto; を指定すること。
*Safari、Netscape も Firefox と同じ。

■ padding
例えば、width:100px; padding:0 10px 0 10px; とすると、最終的な全体の width は、
IE では 100px だが、 Firefox では 120px になる。
よって、IE と Firefox それぞれでの表示を同じにしたいなら、padding は使わず、margin を使う。

■ width + border : 枠のサイズが異なる
IE では、width で指定した値が枠全体のサイズと一致しますが、Firefoxでは、width + border + padding となります。
解決方法としては、IE 用には、_width とし、Firefox 用には、width を使います。

■ Firefox スクロールバーの有無で位置がずれる
Firefox はコンテンツの量を判断して、スクロールバーを表示する。よって、margine:0 auto; を指定していると、スクロールバーが表示された分、ずれることになる。
そこで、body {overflow-y: scroll;} としておくことで解消される。

IE ではデフォルトでスクロールバーが表示されているため、このような現象はおこらない。
ただし、HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を指定すると互換モードになってしまい、スクロールバーが2つ表示されることになるので注意。


本記事に関するお問い合わせはこちら
その他、情報提供、ご意見、ご感想はこちらまで。




特定商取引法の表記 | プライバシーポリシー(個人情報保護方針) | サイトご利用規約 |

(C) 2009-2011 OSANAI CO., LTD. All rights reserved.