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

私は #calendar に PNG を適用しています。IE6 ではフィルターを使用していますが、コンテンツをクリックできなくなります。hasLayout ですが、うまくいかないこともあります。

代わりに、すべてのものを別の 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>

次に、calendar-bg を強制的に絶対配置し、幅/高さ 100% にし、その上に #calendar-content を相対的に配置しますか? または、主流の png 修正スクリプト ( ala htc、jquery.pngFix ) が機能する他の隠された方法はありますか?

4

2 に答える 2

1

それは確かに、私が遭遇したこの問題に対する（唯一の）正しい解決策です。IE の不透明度フィルターがすべての子要素に対してスローされ、その結果、子要素をクリックできないため、最初のソリューション (子要素を相対的に配置する) に頼ることはできません。

そのため、png がクリック可能な要素の親要素に含まれていないことを確認してください。

したがって、プロパティ 'position: relative' (または絶対、レイアウトによって異なります) を持つ親を作成し、背景と実際のコンテンツ用に 2 つの子を挿入します。

例：

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

 
 #calendar { 位置: 相対; }
 #calendar #calendar-bg {
    位置: 絶対;
    左: 0;
    上: 0;
    高さ: 100%; /* 高さと幅がわかっている場合はピクセル単位で */
    幅: 100%; }
 #calendar #calendar-content {
    位置: 相対;
    Z インデックス: 1; }
于 2010-02-26T10:09:44.330 に答える
0

これを回避する方法は、内部のすべてを強制的に配置し (例: position:relative )、z-index + hasLayout を持つことだと思いますが、うまくいかない場合もあります。

Position:relative は hasLayout をトリガーしません。zoom:1z-index のような単純なものを試してみてください。

IE6でpngの上に物を相対的に配置しようとしてもうまくいかないが、z-indexを指定するとうまくいくと確信している（同様の問題を扱った私の記憶から）。

于 2010-02-25T17:38:23.673 に答える