position:relativeでfloat置いてけぼり

404で、各記事冒頭の画像がIEで表示されない原因を調べてみました。

404のデフォルトCSSでは、#header（最上位見出し）を高さを267pxに指定しつつ、#main（本文部分）を position:relative を用いて250px上にずらして#headerに重ねる、という表示指定をしています。が、何故かIEでは、float指定された.image（画像部分）が位置ずらし指定からの置いてけぼりをくらってしまい、本来表示されるべき位置から250px分下に表示されてしまっている、という状態。更に、下に表示された画像はこれまた何故か不明なれど背景画像の裏に隠れている、ということのようでした。

ではどうすれば正しく表示できるかと考えて、試しに .image の指定に position:relative; を追加したところ、画像があるべき位置に表示されるようになりました（これまた何故かは謎ですが）。

.image {
    position:relative;
    float:left;
    margin:0 1em 0.5em 3em;
    text-indent:0;
    }

※ 強調は追加・変更部分です。

ところでこの.imageは、HTML文書ではp要素に対して付加されるclass名になっていますが、置換要素（imgなど）ではない要素にfloatを指定する場合、widthで幅を指定する必要があります。

画像幅が固定であれば.imageにwidth指定を追加すればよいわけですが、異なる幅の画像にも対応したい場合には、以下の様に.image内のimg要素に対してfloat指定するのもひとつの手だと思います。

.image {
    text-indent:0;
    }

.image img {
    position:relative;
    float:left;
    margin:0 1em 0.5em 3em;
    border:1px solid #333;
    }

* * *

IEで「pre 要素が面白いくらい飛び出てる」現象については、いわゆるunderscore hackを使って、

pre {
    _overflow:auto;
    _width:100%;
}

としておくのはいかがでしょう。IEではスクロールバーが表示されますが、幅は一定に抑えられるので、自分も重宝しています。

position:relativeでfloat置いてけぼり

案内