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

Presented by Nishishi via Movable Type. Last Updated: 2017/05/11. 12:19:14.

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

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

このブログ内限定での主要なカテゴリ

track word

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