我有一个正在使用 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看看它的实际效果
最佳答案
为 Logo 层和按钮层提供静态高度,如果可能的话还提供宽度。这将解决 MSIE 的问题。
关于jquery - IE7 - 使用 Jquery 时的 Div 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4929893/