jquery - 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代码:

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代码:

<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>

有点难以解释发生了什么，但如果您观察按钮在 Chrome 中与 IE7 相比的作用，您就会发现问题所在。

http://woodfinx.net看看它的实际效果

Answer 1

为 Logo 层和按钮层提供静态高度，如果可能的话还提供宽度。这将解决 MSIE 的问题。