Question

我在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>不会褪色。

示例2显示淡入容器元素正常工作。

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

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

任何人都能解释一下吗？我已经没头发了！

Answer 1

<强>编辑：

遇到了问题，

span不是块元素。所以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 }

它工作得很好。 SEE DEMO

Answer 2

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);

动态设置不透明度问题 - 仅限IE8

2 个答案: