IEグラジエントフィルタがクリックイベントに応答しない

Question

透明な背景色を使用したいが、グラデーションフィルタをIEのRGBAのフォールバックとして使用する。コードは次のようである：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff); 

私はまた、ユーザーが背景をクリックしたときにイベントをトリガしたいが、私は、フィルタを設定した後、クリックイベントがトリガされないように思えます。フィルタなしですべてが正常です。

別のIEバグですか？どうすれば問題を解決できますか？

Answer 1

これはおそらく透明な背景のリンクをクリック可能にしないIEのバグに関連しているでしょう：私は今日それを見つけました。私は、透明な背景とディスプレイをブロックしてリンクを設定しました。リンクのメインエリアはクリックできませんでしたが、私が設定した10ピクセルの境界線がありました。それはIEもフィルタに問題があるようだ。

この種のバグについては、hereとhereで説明しています。最初の男の解決策は、フィルターを設定する前に要素に偽の背景画像を与えることです。 2番目の要素は、要素に背景色を与え、不透明度を1％に設定することで、これはIEで実質的に見えなくなります。うまくいけば、あなたはこれらのいずれかを使ってそれを丸めることができるでしょう。

Answer 2

これは契約ではありません。 Internet Explorerは、要素の上に配置された別のレイヤーにフィルターを作成します。新しいグラフィックレイヤーは要素の一部ではないため、クリックイベントは発生しません。イベントのバブリングは発生しません。

最近、私はIEのための素晴らしい勾配フィルタでラベル要素を作った。テキストのみをクリックできます。グラデーションレイヤーがある場合とない場合のラベルレイヤーを分析すると、問題が理解できます。

without gradient filter: 

------------------ 
text layer 
------------------ 
background layer 
------------------ 


with gradient filter: 

------------------ 
text layer 
------------------ 
gradient layer 
------------------ 
background layer 
------------------ 

ところで、その理由は、グラデーションフィルタにボーダー半径を設定することができない理由です。それを試してみてください。要素を作成し、境界線の半径でスタイルを設定し、グラデーションフィルタを適用してIE 9で実行します。たとえば、オーバーフロー：非表示の場合など、グラデーションを丸い枠の内側に置いても、従う。その要素のように、要素の上に絶対に配置され、テキストの上と右にそれを覆うように配置されています。