スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

filter:alpha(opacity=**)とCSSに書いてもIE6とIE7で効かない!の巻

トミカリミテッドのカウンタックLP500S 半透明度10%
某ベンチャーのWEBサイト、これまでは割とべたっとしたXHTML1.0で書くだとか、W3C勧告に準拠するぞーとかばっかしてたんだけど、ちょっとだけデザインに工夫を持たせようと半透明、アルファブレンドみたいなのを使ってみようと思った。

そんな機能があるのかどうか知らなかったが、あるだろうと思って調べたらあった。例えば、あるdiv要素に50%の半透明にしたければ以下みたいに書く。

.hogehoge{filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;・・・}
(横に書いちゃいました・・)

filter:alphaはIE6とかIE7向け、真ん中の-moz-opacityはFireFoxとかのMozilla系向け、最後のははなんだろう?まぁこんな感じにしたら良いらしい。まぁ言ってみりゃこれ、ブラウザに依存するあんあまりよくない属性設定なんだな。

・・で試す。いきなりIE7ではダメ。

ちなみにFireFoxだと・・いけるなぁ。Operaは・・なんと、いけるじゃないかって感じでいろいろと試すが、IEだとどうやってもだめ。

調べてみる・・filter:alphaはposition:absoluteな奴じゃないとアカンとか書いてあるけど、absoluteなんだよなぁ・・と小一時間悩む。

・・結論。

今回はまず、ローカルPC上のファイルに変更をして、ローカルPC上で見え方をいろいろ試してた。編集していたWEBページ内にはいくつかスクリプトを書いてあるんだが、そうするとIE7さんはページの上の方で「スクリプト実行していいんかい」とか「ActiveXコントロール実行してええんかい」みたいな事を聞いてくる。別にローカルでは実行する必要がないのでそのままほってた。

・・なんと原因はそれでした。

どうもfilter:alphaはActiveXの実行を許可しないと、効かないらしい。他にもいろいろfilter:alphaを効かせるための条件があるみたいだが、そもそもなんでActiveXを有効にしないと効かないの?という疑問は沸く。たぶんアルファブレンドさせるための関数が、なんかのCOMオブジェクトの中に実装されてるからだろうな。

・・という覚書。個人的にはあんまりIE批判とかMS批判とかしないというか、元々DOSな人から俺は出発してるので世のMS叩きみたいな感情はないんだが、これはIEの実装ミスだと思うな、なんか。

コメントの投稿

非公開コメント

opacity

opacityはCSS3.0準拠のプロパティで、IEを除くモダンブラウザ(正確に言うとブラウザのエンジン)では実装済みです。
最新のFireFoxやOpera、ChromeやSafari(←がopacityの実装の元祖)ではopacityだけで事足りるはずですよ。

すいませんあまり詳しくないんです・・

通りすがりさん、ありがとうございます。あまりHTML、CSSには詳しくなくて・・
プロフィール

N-Soft

Author:N-Soft
最近の記事
カテゴリー
最近のコメント
リンク
RSSフィード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。