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
}
});
例1では、インナー<span>
は色あせしません。
例 2 は、コンテナー要素のフェードが正しく機能することを示しています。
要素の問題である可能性があると想定しましたがinline
、例 3 はそうではないことを示しています。
3 つの例はすべて、IE7 と IE9 では正しく動作しますが、IE8 では正しく動作しません。
誰でもこれを説明できますか?抜く髪がなくなってきた!