0

そうですね、IE8 はひどいですが、互換性を持たせるにはこれが必要です。Firefox では正常に動作し、純粋な CSS から CSS/jQuery に切り替えて、IE8 で動作するようにしました。

これはCSSです：

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
}

IE8 が気に入らないのは CSS Opacity だと思います。

編集：解決済み、答えは以下です。

4

3 に答える 3

1

問題は、ie8 の場合、次のコードを使用したほうがよいということです。 

filter: alpha(opacity=100)

不透明度より。
不透明度のように 0 から 1 ではなく、数値が 0 から 100 に変化することに注意してください。

于 2013-07-10T10:52:49.293 に答える
0

さて、もう少し調べてこれを解決し、答えを追加することにしました。

CSS を次のように変更する必要がありました。

#test p {
    background: none repeat scroll 0 0 #fff;
    filter: alpha(opacity=0);
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
}

IE8 は不透明度をサポートしていないため、次のものが必要でした。

フィルター: アルファ (不透明度 = 0);

これにより、テキストが「壊れ」、エッジがギザギザ/ぼやけて非常に見苦しくなります。これを修正するには、背景を追加する必要がありました:

background: none 繰り返しスクロール 0 0 #fff;

上記のコードには両方の修正が含まれており、これで問題なく動作します。この質問には少し時期尚早だったかもしれませんが、解決策はこの回答で1か所で見つけることができます!

于 2013-07-10T11:05:07.630 に答える
0

このようなもので同じ効果を得ることができます。すべてのブラウザで正常に動作します

<!Doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
<title>HTML5 Template</title>
<style type="text/css">
#test p {
    display:none;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<script>
$("#test p").delay(1000).fadeIn("slow");
</script>
</body>
</html>
于 2013-07-10T11:07:35.573 に答える