この例でIE 7/8でCSS透明度が機能しないのはなぜですか？

Question

私はあなたがここで見ることができますjQueryの通知バーの例に取り組んでいます：jQuery notification bar example

しかし、何らかの理由で、私はIE 7と8の透明性を定義するために使用しているCSSが動作していません。 IE 7/8の例を見ると、.png閉じるボタンの透明度と "reopen"要素の透明度が機能しないことがわかります。

私はこのコードを使ってIEで要素の透明度を定義していますが、この例では機能しない理由を理解できません。

私はthis postを読むと何かにヒットしたかもしれないと思っていましたが、hasLayoutプロパティで説明した解決策を試した後も、私はまだ運がありませんでした。

ご協力いただければ幸いです。追加の詳細が必要な場合はお知らせください。

ありがとうございます！

Answer 1

OK私は上記の回答と私自身の追加の研究の助けを借りて私の質問に答えてくれたと信じています。

は実際にこの問題の2つの部分があります：IEで.pngを閉じるボタンで

1）透明性の問題 - この部分は、上記の先のとがっで答えました。 Pointy氏によると、「ブラウザは画像上の不透明効果と同時に透明PNGの合成を管理することはできません。つまり、任意のピクセルについて、PNG自体からのアルファチャンネル効果、または不透明度フィルタしかし、両方ではありません。 （彼の答えであるIE7 and "jaggies" around layered PNGs (with jQuery)から引用）

私がやりたいことは、通常の状態で.pngクローズボタンが半透明で、ホバー状態で完全に不透明になることですが、明らかにこれはできません単一のイメージとCSS透明度を使用してIEで実現します。だから、これを回避するために、私はちょうどそのコンポーネントを処理するためにCSSの透明性に頼るのではなく、素敵なホバー効果を得るためにデュアルステートの.pngイメージを作らなければならないでしょう。

2）ボタン「再度開く」と透明性の問題 -半透明であるべきであるが、IEでは動作しませんでしたこのボタンを。私自身のいくつかの広範な研究をした後、私はこの投稿に遭遇しました：jquery IE Fadein and Fadeout Opacity。そのポストのwoodstyleeの答えは私の問題を解決しました。

完全に理解できない奇妙なIEのバグのため、のトランジション/フェードエフェクトが適用される前に、jQuery/javascript を使用して要素の不透明度を宣言する必要があります。

明らかに、IEのjQueryフェード/トランジションとCSSの不透明とは何らかの矛盾があります。他の誰かがこの件に関するいくつかの追加情報を投稿してください！

私のコードを以下のように更新したところ、IEで半透明に表示される「再オープン」ボタンを正常に取得できました。上記のコード行が前置かれるように、この行を必要としていること

$('#hello_mini').css('filter', 'alpha(opacity=75)'); 

注：

また、ノートの

$('#hello_mini').show('slow'); 

...このIEのバグのみjQueryのショーに適用するために表示されます（）とhide（）関数があります。アニメーションをslideUp（）またはslideDown（）に切り替えると、透明部分が追加のjavascriptなしで正常に機能します。 jQueryのショー（）および非表示（）

を通じてアニメーション要素に適用されたとき、私は私の研究に何かを見つける場合はIEでCSSの透明性で行く奇妙な何かがある

だから、一番下の行...私はここにそれを掲示するでしょう。

Here is a link to my updated example, which works in IE 7/8 now.

Answer 2

wow somebody else just asked a question about this。古いバージョンのIEでは、透明効果を持つPNGアルファチャンネルから透明効果をCSS効果から作成することはできません。スタイルを適用するとすぐに、イメージから透明性を引き出そうとします。

はい、それは非常に不自由です。

Answer 3

opacity: 0.50; 
filter:alpha(opacity=50); 

これは、IEの不透明度を修正します。ここでは例として50％透明度を使用しています。

hellobar_closeについては、背景色を付けてください。動作するはずです。 IEは.png画像の透明度をあまりサポートしていません。