0

我在使用 IE8 中的 jquery 设置某些元素的不透明度时遇到了一些问题，我终生无法弄清楚。

看这个例子：Jsfiddle

<div class="container">

<div id="output" class="output">
    <p>Output is: <span></span></p>
</div>

<div id="output2" class="output">
    <p>Output is: <span></span></p>
</div>

<span id="output3" class="output">
    <p>Output is: <span></span></p>
</span>

</div>​

.container {
    height: 2000px;
    width: 400px;
}

.output {
    position: fixed;
    top: 100px;
    left: 30px;
    color: white;
    font-size: 16px;
    z-index: 9999;
    background: red;
    padding: 10px;
}

#output2 {
    top: 150px;
}

#output3 {
    top: 200px;
}

$(window).scroll(function() {


if($(window).scrollTop() >= 0)
   {     
       var theValue = (1-($(window).scrollTop()-0)/1000);
       $("#output p span").css('opacity', theValue);
       $("#output2 p").css('opacity', theValue);
       $("#output3").css('opacity', theValue);
       $("#output p span").html(theValue); // DEBUG OUTPUT
       $("#output2 p span").html(theValue); // DEBUG OUTPUT
       $("#output3 p span").html(theValue); // DEBUG OUTPUT

}
});​

在示例一中，内部<span>不会褪色。

示例二显示淡化容器元素可以正常工作。

我认为这可能是inline元素的问题，但示例三表明情况并非如此。

所有三个示例在 IE7 和 IE9 中都可以正常工作，但在 IE8 中不能正常工作。

谁能解释一下？我的头发快要拔出来了！

4

2 回答 2

1

编辑：

有你的问题，

thespan不是块元素。所以opacity没有申请。使它成为一个block或inline-blcok元素。

通过像这样最小化您的代码：

$(window).scroll(function() {
    if($(window).scrollTop() >= 0) {     
        var theValue = (1-($(window).scrollTop()-0)/1000);
        $("#output p span, #output2 p, #output3").css("opacity", theValue);       
        $("#output p span, #output2 p span, #output3 p span").html(theValue); // DEBUG OUTPUT
    }
});

并通过添加以下 CSS：

.output p span { display:inline-block }

它运行良好。看演示

于 2012-09-06T10:53:03.733 回答
0

IE dosnt 使用不透明度，它使用过滤器。有关更多信息，请参见此处http://www.quirksmode.org/css/opacity.html

一些 jquery 动画会自动处理这个问题。例如：

尝试

 $("#output p span").fadeTo(1, theValue);
 $("#output2 p").fadeTo(1, theValue);
 $("#output3").fadeTo(1, theValue);
于 2012-09-06T10:52:36.833 回答