sikkuiです。

右の「BLOG登場人物」で自分の自己紹介が[CSSの鬼]となっているので、今日はCSSについて触れる。

CSSで制作を行っていると様々なInternet Explorerのバグに直面する。
そこで自分が最近、よくあるバグや直面したバグと回避方法を簡単に記載してみる。

レイアウトでfloatを使用している部分が、IE6で崩れた。

IE6のfloatにはダブルマージンのバグがある。
marginをpaddingに変更か、
disply:inlineを追加すればマージンバグを回避できる。

IEで連続改行が無視される。

IEで<br>連続して入れた場合、改行を1つ無視するバグがある。
CSSファイルの一番最後に、　*br {letter-spacing:0;}　を挿入することで回避。

IEで背景画像が消える、もしくは線が途中で消える。

IEで親ボックスに背景指定、子がfloatを使用しているこのような現象が起きる場合がある。
親ボックスに、　.oya {zoom:100%;overflow:auto;}を挿入することで回避。

全てのブラウザでボックスがセンタリングされない。

これはバグではなく、必要要素揃っていないとセンタリングされない。
ボックスのセンタリングの条件として、margin、width、ブロックレベル要素であること。
この3つの要素が揃っていなければ、センタリングが行われない。
とりあえず、　.centerling{margin:0 auto;width:300px;display:block;}　とすれば、センタリングされる。

３つの要素を満たしているのにIE6でボックスがセンタリングされない。

htmlの一番最初の文書型宣言が「互換モード」になっているとセンタリングが行われないIE6のバグです。
文書型宣言を「標準モード」に切り替えるか、
{text-align:center}をセンタリングの要素に入れれば、バグを回避できる。
しかし{text-align:center}を挿入すると下位にも継承され、後々の処理が面倒臭くなる。
センタリングバグを回避するJavaScriptを入れた方が早いかもしれない。

IEで画像を不透明にするとドットが出る。

opacityなどを使用すると、jpg画像で黒に近い青に白いドットが出るバグがある。
画像の形式をpngなどに変えることで回避。

他にも色々バグがあるが、また次に。
それにしてもやっぱり、IEはバグが多いな・・・