- 締切済み
CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- koutarou504
- ベストアンサー率44% (182/407)
IE のバグの様なので IMG に padding は諦めるしか・・・。 IE6 で <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と DOCTYPE を限定すれば実現しますがぁ～ IE5 では DOCTYPE に関わらず無効・・・。 という事で、考え方としては IMG でなく他の要素に枠などの役回りを <div class="img-shadow"> <div> <img src="./1.jpg" alt="" width="200" height="150" /> </div> </div> .img-shadow div { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: 6px 6px 6px 6px; padding: 4px; } 意味的には div でなく span でも良いかも・・・。 尚、DOCTYPE の変更によって対応する場合は、全ての CSS 記述がどう描画されるか変わる可能性（バグやら拡張機能やら・・・）が高いので、検証に要注意・・・。 意外と面倒です・・・・・。
あまり詳しくは知らないのですが、DOCTYPE宣言を↓にして 試してみるとIEでも反映されました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> urlなしだとIEには反映されなくなるようです。
