Internet Explorerのスタイルシートのエラー（marginについて） 

テーブルを使用せずにスタイルシートでレイアウトを考える上で、
marginやpadding、borderやwidthの厳密な意味を知る必要に遭遇する筈だ。

ここでは細かいそれらの意味は割愛するが、
Internet Explorer上でスタイルシートでmarginを設定する際にバグが生じる件について触れようと思う。

スタイルシートでレイアウトを行う上でfloatは重要であるが、
floatを設定した上でmarginを設定するとエラーが生じる。

例えば、

margin-left: 10px
float: left

と設定するとしよう。

Firefoxやoperaでは左に10ピクセル分正常に移動するのだが、
何故かInternet Explorerでは20ピクセルも左に移動する。
floatを設定しなければこのエラーは発生しないが、floatはTABLE以外でレイアウトを行う上で必要不可欠なので外せない。

ではどうすれば良いか？

その答えは、簡単。
marginを設定するのを諦めて、paddingで設定すれば良いのである。
paddingであればIEでもFirefoxでもoperaでも変わらずに表示される。

IEのバグ。このバグの原因と解決方法が分からず、無駄に随分と時間を費やした。
IEの印象度、下がるなぁ～・・・（＾＾；

yasu | スタイルシート | 2006年05月18日 | トラックバック(<$ MTEntryTrackbackCount$>)

■ 最新記事10件
 MySQLをバックアップ（phpMyadminの使用法）（日 付：2007年11/11）
 Firefoxでリファラを許可する方法（日 付：2006年08/29）
 IEで文字が消えるバグ（日 付：2006年08/24）
 CSSでリストを作る時のmarginとpadding（日 付：2006年07/27）
 MTをPHP化する時の注意（PHPがCGI版の場合）（日 付：2006年07/05）
 Internet Explorerのスタイルシートのエラー（marginについて）（日 付：2006年05/18）
 阿部眼科クリニックのＨＰ（日 付：2005年12/25）
 Firefox1.5にアップグレード（日 付：2005年12/05）
 重複トラックバックを排除するプラグイン（日 付：2005年12/01）
 Text Link ～Firefox便利プラグイン～（日 付：2005年11/30）