米が好き

3カラムのデザインに飽きてきたので、2カラムに変えました。
ちなみに、今のテーマはデフォルトを使ってカスタマイズしてます。

いつもはFirefox使ってるんで、ついついIEでの確認を怠りがちですが、ある程度出来上がった状態でIE表示チェックしてみると何故かデザインがおかしい…。

CSSをチェックしても、何をどーしてもバックグラウンドのズレが直らない。
何でやー！？　Firefoxでは正常に表示されてるのにー！
ってな事で、昔見た雑誌に何か書いてあった事を思い出して読み返してみました。

要は、『CSSでfloatした方向と同じ側にmargin指定すると、IEではmarginが倍になってしまうThe IE Double Float-Margin Bugと言う、IE特有のバグ』らしい。
うおぉぉぉ、IEのあほーーーーー！ｗ

結局、↓ の場合は、margin-leftが倍の20pxになるって事。

div.left_float {
  float: left;
  width: 300px;
  margin-left: 10px;
}

これをIEでも正常に表示させるのは、『display: inline;』を使用すると直る。
↓ のように、displayを追加。

div.left_float {
  float: left;
  width: 300px;
  margin-left: 10px;
  display: inline;
}

本来、float要素に対してこの指定は無視されるけど、IEのバグ現象を防ぐ力を持っているらしいです。
解決方法がある事は分かったが、もう一度言おう。
IEのあほーーーーー！ｗ

買ってて良かった、Web creators。