Question

我有一个div，我正在使用jquery淡化，但是每当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

为徽标图层和按钮图层指定静态高度（如果可能的宽度）。这将解决MSIE的问题。

Answer 2

确定。现在我不知道为什么会这样，或者这是IE 7的另一个渲染问题。现在这就是我在IE中使用clicky的方法所做的：

对于包含按钮的表格单元格，添加以下样式

position: relative;

由于一些奇怪的原因似乎在IE 7中都有效。除非那只是开发人员工具栏做了一些奇怪的事情。

此外，我注意到在IE 7中悬停时按钮不会恢复正常状态。

修改出于好奇，你为什么要使用表格进行简单的布局？ Div的布局非常完美和容易。

IE7 - 使用Jquery时的Div对齐问题

2 个答案: