Fatal编程技术网
  • html/
  • Html 由于不透明度过滤器，IE8 div溢出不可见（切断）

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

html css internet-explorer internet-explorer-8

Html 由于不透明度过滤器，IE8 div溢出不可见（切断）,html,css,internet-explorer,internet-explorer-8,opacity,Html,Css,Internet Explorer,Internet Explorer 8,Opacity,我使用jQuery和淡入divs。在所有浏览器上都能很好地工作，但是IE8（我怀疑其他IE版本也一样）将切断溢出外部div的div，当它们的不透明度设置为filter:alpha（不透明度=100）时。如果您将以下内容复制并粘贴到一个文件中，并使用IE8加载该文件，您将看到蓝色方块被切断，因为它溢出了其外部div <html> <head> <style> .outer { filter: alpha(opacity=100); positio

我使用jQuery和淡入
div
s。在所有浏览器上都能很好地工作，但是IE8（我怀疑其他IE版本也一样）将切断溢出外部
div的
div
，当它们的不透明度设置为
filter:alpha（不透明度=100）
时。如果您将以下内容复制并粘贴到一个文件中，并使用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>




.外部{
过滤器：α（不透明度=100）；
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：150像素；
边框：2px实心#f00；
背景色：#700；
}
.内部{
位置：绝对位置；
顶部：100px；
左：50px；
宽度：100px；
高度：100px；
边框：2倍实心#00f；
背景色：#007；
}



如果允许内部div溢出（是的，我已经尝试了溢出：可见），并且我可以使用jQuery的动画机制来实现不透明度，那么如何才能使其工作？
在您的示例中，是Doctype或缺乏Doctype导致它在IE8中崩溃，但总的来说，IE过滤器和hasLayout存在问题，即使在IE7中使用了正确的Doctype也是如此。虽然我不确定你到底想做什么，但我在你的作品中为这个例子想出了一个解决办法

关键是不要将
外部
div定位，如果需要，请将其包装为另一个div，该div“放置”位置。我发现的另一件事是IE也可以在
内部的
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>


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


其他浏览器不需要
内部的不透明度，因为它们正确地继承了它。。所以在这一次，你是否需要在
内部
上使用过滤器取决于你自己。我刚刚用IE8尝试了你的代码，但它确实溢出了。。。这可能是由于您的jquery代码，您能检查一下吗？我从IE8中加载的.html文件中复制并粘贴了该代码。。。您是否启用了兼容模式？有趣的是，您提到我在IE8中遇到的问题是缺少DOCTYPE声明。在我的网站上，这是一个真正的问题，我有一个DOCTYPE。通过反复试验，我将问题缩小到上面的代码。但事实证明你是对的，添加DOCTYPE确实可以在我的测试html中解决这个问题。所以我想我需要进一步缩小真正的问题。我真的不在乎IE7在这方面。你的解决方案实际上对我来说是正确的。我确实有一些不透明度平滑的问题，就像你提到的，但它的背景是外部。。无论如何，至少它在动画前后看起来都不错。谢谢

$(document).ready(function() {

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

});