IE9のスタイルシートfilterとpositionの併用について
-
2012年2月7日 8:37
ドキュメントモードがIE9標準の場合、positionが設定されている要素にfilter:Gray()が効きません。
（１）効かない原因と、（２）考えた対策案でなぜ解決できるのか、
またはこれからも調査を継続するあたって、ヒントになる情報がいただければ思い、投稿させていただきます。以下に再現用の例を載せます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"> <html lang="ja" style="filter:Gray();"> <body style="position: relative;"> <div> <img src="http://www.metro.tokyo.jp/IMG/top_logo.gif" /> </div> </body> </html>
例はシンプルにしていますが、目的はコンテンツすべてに対して、filter:Gray()を適用したいと考えています。現象が発生する具体的な各値は、下記です。
position:relative, fixed, absolute
filter:Gray()
（１）
なぜ、filter:Gray()が効かないのでしょうか。
Invert()やXRay()は正常に効いています。
（２）
対策案はいくつか(※)あると思いますが、<html>タグのfilterに、「Gray()」の代わりに「progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)」を使用することを検討しています。※)bodyタグにfilter:Gray()を指定するなど。
「Gray()」と「progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)」は、実行される機能/結果は同じであると考えているのですが、なぜ今回の場合は、問題が解決できたのでしょうか。
----
position, filter, DXImageTransformなどをキーワードにして検索してみましたが、有用な情報は得られていません。
類似現象と思わしきものは、以下のサイトで見つかりましたが、少々今回とは異なった現象かと考えています。
http://bbs.blueidea.com/thread-2836842-1-1.html
↑は中国語サイトです。しかもその問題は解決していません。。。
すべての返信
-
2012年2月7日 12:34
質問に含まれていない点もまとめて指摘します。
1. <html>タグにはstyle属性は存在しません。DOM的には存在するので、CSSファイルで指定したり、JavaScriptから操作することは可能ですが、HTMLタグには記述できません。動作しなくても不思議ではありません。ちなみにHTML5でstyle属性が追加されたのでIE10では記述してもいいのかもしれません。（IE9でもHTML5に一部対応と言っていましたが、リンク先の属性一覧にはないので。）
2. filterはIE8から-ms-filterが定義され、IE9から非推奨、IE10で廃止だったと思います。動作しなくても不思議ではありません。
3. filterはいつだったかのバージョンからDXImage～の書式に移行しています。動作しなくても不思議ではありません。
4. Visual Filters and Transitions ReferenceにGray()がそもそも記載されていません。これが本命でしょうか。
- 回答としてマーク seventhcherry 2012年2月8日 4:59
-
2012年2月8日 5:04
ご回答、ありがとうございます。
MSDNなどでも確認したつもりでいましたが、確認の仕方が不十分だった気がします。
大変参考になりました。ありがとうございます。
.png)
