2006年12月20日(水) 23時43分00秒 [Web関連]

IEの互換モードでfloatを使ったとき

DOCTYPE宣言を省略するとかして、IEのレンダリングを「互換モード」にした状態で、CSSのfloatプロパティを使って複数の画像を端に寄せると、ぴったりくっつかないんですね…。「標準モード」だとぴったりくっつくんだけど。

例えば、以下のようなHTMLを書いて...

以下のよーなCSSを書いた場合。

DOCTYPE宣言を正しく書いて、「標準モード」でレンダリングさせれば、3つの画像はぴったりくっつきます。隙間無く。全部を左端に寄せるデザインなんだから当然です。
でも、DOCTYPE宣言を省略して、「互換モード」でレンダリングさせると、3つの画像は、少し離れて並びます。くっつきません。

で、その距離は、marginプロパティ・paddingプロパティ・border-widthプロパティのすべてをゼロにしても縮められません…。(^_^;;;

ただ、marginプロパティの値をマイナスにすれば、ぴったりくっつけることは可能なんだけど。値を「-3」にするとぴったりくっつきました。もちろん、そんなことすれば、IE以外のブラウザで画像が重なっちゃうので、解決策とは言えません。

ううーん。
「互換モード」…。(^_^;;;

自分で使うだけなら、「標準モード」で表示されるようにHTMLを記述しておけば済む話なんだけど。他の人に活用してもらうべく紹介する場合には、「標準モード」を前提にするわけにもいかず…。苦しいとこだなあ。(^_^;;;