PNG画像のためにIE6フィルタを適用した後にクリックできないコンテンツを固定する好ましい解決策は何ですか？

StackOverflow https://stackoverflow.com/questions/2335501

質問 

<div id="calendar">
  <p>Text</p>
  <div class="section">blah</div>
</div>

私はIE6 I用フィルタで、#calendarにPNGを適用していますが、それはコンテンツがクリックできない作る - 私はこれを回避する方法は、 に配置されるように力のすべてを内側にしたと考えている（例えば位置：相対）とhasLayout のZインデックス+ を持っていますが、時にはそれが動作しません。

。

万一、私が代わりに別のdiv内のすべての私のものをラップして、このようなこのような兄弟ノードへのPNG BGを適用する、または何？

<div id="calendar">
  <div id="calendar-bg"></div>
  <div id="calendar-content">
    <p>Text</p>
    <div class="section">blah</div>
  </div>
</div>

次に絶対位置するカレンダー-BGを強制し、100％の幅/高さ、及びその上に相対的に位置＃カレンダーコンテンツ？またはいくつかの他の隠された方法があることが主流のpng定着スクリプト（ALA HTC、jquery.pngFix）の作品？

役に立ちましたか？

解決

確かに私が今まで出会ったこの問題への（唯一の）正解です。

。 IEでの不透明度フィルタは子要素が結果としてクリッカブルされていないと、すべての子要素の上にスローされますので、あなたは、（比較的チャイルズを配置する）あなたの最初のソリューションに頼ることはできません。

だから必ずPNGはクリッカブル要素の親要素ではないことを確認してください。

だから、プロパティ「位置：相対」を持つ親を作成（または絶対に、あなたのレイアウトに依存）と背景と実際の内容のために2人の子供を挿入します。

。

例：

<div id="calendar">
   <div id="calendar-bg"></div>
   <div id="calendar-content">
       <p><a href="#">Text</a></p>
   </div>
</div>

 
 #calendar { position: relative; }
 #calendar #calendar-bg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; /* Or the height and width in pixels if you know them */
    width: 100%; }
 #calendar #calendar-content { 
    position: relative;
    z-index: 1; }

他のヒント

  

私は信じてこれを回避する方法が配置されるように、すべての内部を強制する（例えば位置：相対）することでした。そしてZインデックス+ hasLayoutを持っていますが、時にはそれが仕事をしません。

位置：相対はhasLayoutをトリガしません。あなたは、zインデックスを持つzoom:1のようなものを簡単に試してみてください。

私はIE6でPNGの上にしようとする比較的位置のものは仕事をしませんが、Zインデックスを指定することはありません。

という（同様の問題に対処するための私の記憶から行く）かなり確信しています
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top