由于不透明过滤器，IE8 div 溢出不可见（截止）
Posted
技术标签:
【中文标题】由于不透明过滤器，IE8 div 溢出不可见（截止）【英文标题】：IE8 div overflow not visible (cut off) due to opacity filter 【发布时间】：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 文件中复制并粘贴了该代码...您是否打开了兼容模式？ 【参考方案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。 您的解决方案实际上对我来说是正确的。我确实有一些像你提到的不透明平滑度问题，但它的背景是外部的......无论如何，至少它在动画之前和之后看起来不错。谢谢。以上是关于由于不透明过滤器，IE8 div 溢出不可见（截止）的主要内容，如果未能解决你的问题，请参考以下文章