blog.nomadscafe.jp

IE6で標準準拠モードにすると「いままで通りの方法」でCSSのFilterが動かない。
個人的にはどうでもいいんだけど、ぱどタウンでは重要なのでメモ。

IE6の標準準拠モードがOnになっていない場合は、

<font style="width:100%;filter:DropShadow(color=#FF00FF,offX=1,offY=0);">ドロップシャドウをかけたいテキスト</font>

とすることで、DropShadowがかかる。ところが、DOCTYPEスイッチによって標準準拠モードにすると上ではフィルターは動かない。inline要素に対してwidthを設定することはできないからだろうと思って、

<div style="width:100%;filter:DropShadow(color=#FF00FF,offX=1,offY=0);">ドロップシャドウをかけたいテキスト</div>

<font style="display:block;width:100%;filter:DropShadow(color=#FF00FF,offX=1,offY=0);">ドロップシャドウをかけたいテキスト</font>

を試すと両方動いた。ただし、width:100%;を消すとだめ。displayとwidthを両方設定するのは面倒だなといろいろ調べて、msdnのドキュメントにたどり着いた。

インライン 要素の width および height
SPAN、B、および I などのインライン 要素は、width や height プロパティをサポートしません。標準準拠モードを有効にして、インライン 要素の width や height プロパティを設定するには、インライン 要素の display プロパティを inline-block に設定します。

なぜ、inline-blockなのか謎だったが、

<font style="display:inline-block;filter:DropShadow(color=#FF00FF,offX=1,offY=0);">ドロップシャドウをかけたいテキスト</font>

としてみると見事フィルターうごいた。

Blog.NomadsCafe.Jp