にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:22:45.

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

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

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

<img src="a.gif" width="30" height="30" alt="a">
<img src="b.gif" width="30" height="30" alt="b">
<img src="c.gif" width="30" height="30" alt="c">

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

img { float: left; }

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

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---