Question

我使用jQuery并淡入div。适用于所有浏览器，但IE8（我怀疑其他IE版本）会在div用div设置不透明度时切断溢出外filter: alpha(opacity=100)的{{1}}。如果您将以下内容复制并粘贴到文件中并使用IE8加载，则会看到蓝色方块被切断，因为它会溢出其外部div。

<html>
<head>
<style>
.outer {
    filter: alpha(opacity=100);
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 150px;
    border: 2px solid #f00;
    background-color: #700;
}
.inner {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 100px;
    height: 100px;
    border: 2px solid #00f;
    background-color: #007;
}
</style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

如何让内部div允许溢出（是的，我尝试overflow: visible）并且我可以使用jQuery的动画机制来实现不透明度？

Answer 1

在你的例子中，它是Doctype或缺少它导致它在IE8中断，但总体来说它是IE过滤器的问题和hasLayout即使有正确的Doctype仍然在IE7中发生。虽然不确定你想要制作动画的确切内容，但我已经为你的OP中的示例提出了一个解决方法

关键是不要让outer div定位，如果你需要它，将它换成另一个“占据”位置的div。我发现的另一件事是IE也可以使用inner div上的不透明度过滤器，但您可能不在真实代码中

这是一些解决方法代码：

<强> CSS

#wrap{ position: absolute; top: 30px; left:150px}

.outer {
    filter: alpha(opacity=50);
    opacity: 0.5;
    width: 200px;
    height: 150px;
    border: 2px solid #f00;
    background-color: #700;
}

.inner {
    position: absolute;
    filter: alpha(opacity=50);  
    top: 100px;
    left: 50px;
    width: 100px;
    height: 100px;
    border: 2px solid #00f;
    background-color: #007;
}

button {position: absolute; left: 0px; width: 100px;}

<强> HTML

<button>Toggle Fade</button>
<div id="wrap">
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

<强>的jQuery

$(document).ready(function() {

     $('button').click(function(e) {
        $('.outer, .inner').fadeToggle("slow", "linear");
    }); 

});

如果切换不适用于内部div，则动画在IE中相当不稳定，它会平滑地淡化外部div，但内部div只是显示/立即隐藏

其他浏览器不需要inner上的不透明度，因为他们正确地继承了它..所以在那个你需要在inner

上使用过滤器

由于不透明度过滤器，IE8 div溢出不可见（切断）

1 个答案: