1

これは奇妙な問題です。CSS3グラデーションを使用して、フェードアウトオーバーレイ効果（alaライトボックス）を作成しています。

IE9 では、(フィルター: progid:DXImageTransform.Microsoft.gradient を使用しているため) オーバーレイ レイヤーがクリック可能ではないことに気付きました。

フィドルを作成しました: http://jsfiddle.net/tJPF6/

予想される動作: 数字をクリックします。モーダルウィンドウが表示されます。ホバー効果を得るために数字の上にホバーすることはできません。オーバーレイの任意の場所をクリックして閉じることができます。

IE9 の動作: 数字をクリックします。モーダルウィンドウが表示されます。ホバー効果を得るために数字の上にホバーすることができます。オーバーレイのどこかをクリックして閉じることはできません。

誰もこれを経験したことがありますか？PNG の使用に戻ることもできますが、可能であればグラデーションを使用することをお勧めします。

4

2 に答える 2

2

実際の背景を div に追加するだけです。IEには、透明な背景を持つ要素のクリックを認識しないという悪名高い問題があり、CSSはIEのすべてのバージョンで背景を技術的に透明のままにします(フィルターは背景としてカウントされません)。

他の背景定義の前にフォールバック背景を追加するだけです。つまり:

#transCover {
    background:#666; /* add this line */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 1%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(1%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
于 2012-07-05T16:45:44.287 に答える
1

pngのままにしておくことをお勧めします。グラデーションに IE フィルター機能を使用しない理由は多数あります。

  • マイクロソフトは、css3 機能についてはいずれにせよそれを非推奨にしようとしています。これは、これまでに意図されていたフィルターのすべての機能を置き換えるためです。
  • 私の経験では、ms フィルターのレンダリング エンジン (以前は少し試してみました) を他のページ レンダリングと組み合わせると、予期しない結果が生じる可能性があります。
    • 要素が消える
    • フォントが正しくレンダリングされない
    • リンクをクリックできない、ホバーが機能しない (現在発生している種類)

あなたの場合、既に png でソリューションを実装している場合は、そのままにしておきます。頭痛の種や、どこから始めてもデバッグに費やす時間などを大幅に節約できます。

于 2012-07-05T16:19:39.273 に答える