喫茶LAPON-β

メモメモ。

※今回はhead内にCSSを書きました。ぜひ覗いてみてください☆

IE6はimgにpaddingが効かないようです。
これも有名なバグみたいです。
サンプル0
※IE6だと表示が変です。

今回の目的
下記の画像のような装飾を、CSSでIE6でも対応させる

デザイン条件
(1)上記の画像のようにimgに5pxの余白を取り、その周りに1pxの線を引く。(CSS)
(2)写真の大きさを固定しない。(HTML)

解決策1
互換モードが原因なのでXML宣言を取れば解決☆
サンプル1
...でも、こんなことしたらtomoさんやKお兄さんに怒られる。ひぃ！
たとえ記述が必須じゃないUTF-8でも。

解決策2
imgをspanで囲み、spanにpaddingを指定する。
サンプル2
一瞬うまくいったかと思ったのですが、写真と写真の余白が変です。

解決策3
imgにborder5px指定し、spanに1pxのborderを指定する。
サンプル3
これでなんとか解決です☆

しかし、今回のサンプルは単純なソースなのでうまくいきましたが、
もっと複雑になってくると、これでは解決できない時があるみたいです。
やっぱり、XML宣言を取ったり、写真の大きさを固定しないと無理なのでしょうか。。。