IE7 - Jqueryを使用するときのdiv整列の問題

Question

jqueryを使用してフェードしているdivがありますが、divがクリックされるたびにFFやChromeのように正しく整列しません。私はIE7しか持っていないので、それをテストしています。IE8が同じように動作しているかどうかわかりません。

（フェード効果のため）のjQueryコード：ここで

$(document).ready(function(){ 


$("div.a").hover(
    function() { 
     $(this).stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
     $(this).stop().animate({"opacity": "1"}, "slow"); 
}) 
.click(
    function() { 
     $("div.a").css("z-index","10"); 
    $(this).css("z-index","8"); 
}); 

}); 

は、CSSコードです：ハードの

<a href="javascript:animatedcollapse.toggle('vimeo')"> 
<div title="Vimeo" class="fadehover"> 
<div class="a"><img src="images/table_14b.png" width="112" height="105" style="position: absolute;" alt=""></div> 
<img src="images/table_14.png" width="112" height="105" alt="" class="b"> 
</div></a> 

種類：

div.a { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    border: 0px;} 
img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 9;} 
div.fadehover { 
    position: relative;} 

そしてここでは、HTMLコードがあります何が起きているのかを説明するために、IE7と比較してChromeのボタンが何をするかを見ると、問題が見えます。静的な高さを与える行動

Answer 1

でそれを見るために、可能な幅があれば、ロゴ層とボタン層に

http://woodfinx.net。これにより、MSIEの問題が解決されます。

Answer 2

今私はなぜこれが動作するか、またはこれがIE 7のレンダリングの問題の別のものであるかどうか分かりません。今、これは私がclicky事はIEで動作するように取得するために何をしたかである：いくつかの奇妙な理由で動作するように思われることのボタンを保持するテーブルセルに

が

position: relative;

次のスタイルを追加しますIE 7すべて。それがDeveloper Toolbarだけで何か変なことがない限り。

はまた、私はIE 7でちょうど好奇心のうち

編集 をオフに推移したときにボタンが正常な状態に戻らないことに気づき、なぜあなたはそのシンプルなレイアウトのためにテーブルを使用していますか？ Divのレイアウトは完全で簡単です。