スタイルシート IE と Firefox での違い
情報教材販売支援 ウリゾウ http://apps.osanai.co.jp/
スタイルシート について、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つ表示されることになるので注意。
（もっと読みたいなら「情報教材販売支援 ウリゾウ」で検索！）
スタイルシート について、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つ表示されることになるので注意。
（もっと読みたいなら「情報教材販売支援 ウリゾウ」で検索！）