由于不透明过滤器，IE8 div 溢出不可见（截止）答案

【问题标题】：IE8 div overflow not visible (cut off) due to opacity filter由于不透明过滤器，IE8 div 溢出不可见（截止）
【发布时间】：2011-08-30 04:07:18
【问题描述】：

我使用 jQuery 并淡入 divs。在所有浏览器上都运行良好，但 IE8（我怀疑其他 IE 版本也是如此）将切断divs，当它们的不透明度设置为filter: alpha(opacity=100) 时溢出外部div。如果您将以下内容复制并粘贴到文件中并使用 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 的动画机制来实现不透明度？

【问题讨论】：

我刚用IE8试了你的代码，它确实溢出了......这可能是由于你的jquery代码，你能检查一下吗？
我从 IE8 加载的 .html 文件中复制并粘贴了该代码...您是否打开了兼容模式？

标签： html css internet-explorer internet-explorer-8 opacity

【解决方案1】：

在您的示例中，它是 Doctype 或缺少它导致它在 IE8 中中断，但总体而言，这是 IE 过滤器的问题，并且即使使用正确的 Doctype，在 IE7 中仍然会发生 hasLayout。虽然不确定您到底想制作什么动画，但我为您的 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 问题是缺少 DOCTYPE 声明。在我的网站中，这是一个真正的问题，我确实有一个 DOCTYPE。通过反复试验，我将问题缩小到上述代码。但事实证明你是对的，在我的测试 html 中添加 DOCTYPE 确实解决了这个问题。所以我想我需要进一步缩小真正的问题。我真的不关心 IE7。
您的解决方案实际上对我来说是正确的。我确实有一些像你提到的不透明平滑度问题，但它的背景是外部的......无论如何，至少它在动画之前和之后看起来不错。谢谢。