CSS IE7低速オーバーレイ
-
08-07-2019 - |
質問
ボタンを押すと、オーバーレイが表示されます。 Firefoxでは、オーバーレイは高速で、特別なものはありません。しかし、IE7では、オーバーレイが非常に遅くなります。なぜだろうか?
これが私のCSSです:
.DocOverlayShow
{
background: url("/Graphics/overlay bg.png");
top:0px;
left:0px;
width:100%;
position:fixed;
padding:10px;
}
.DocAddCommentBox
{
color: #000;
margin:0 auto;
margin-top: 200px;
width: 650px;
}
ボタンをクリックすると、オーバーレイがアクティブになります。 IEのすべてが正常に動作しますが、オーバーレイは非常に遅いです。どのようなアイデアが来ましたか?
編集: 不透明度とフィルターを使用すると、このdivのすべても透明になります。これはしたくない。オーバーレイdivには、別のdiv(DocAddCommentBox)があります。このdivには透明度がない場合があります。どうすれば解決できますか?
編集:解決策:
.DocOverlayShow
{
background-color: #0057C3;
Opacity:0.5;
filter: alpha(opacity=50); /*IE*/
top:0px;
left:0px;
width:100%;
height: 100px;
position:fixed;
padding:10px;
z-index: 1000;
}
.DocAddCommentBox
{
background-color: #DBDBDB;
color: #000;
position: fixed;
margin:0 auto;
margin-top: 150px;
width: 450px;
z-index:2000;
}
そして私が使用したhtml:
<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>
解決
overlay.pngにはアルファチャネル/透明度がありますか?その場合は、透明度なしで試してください。メモリから、IEはそのようなもののレンダリングが恐ろしく遅いです。
透明にするためにCSSを使用します。
不透明度を次のように設定します:
Opacity:0.5;
残念ながらIEではサポートされていないため、カスタムIE属性も使用する必要があります。
filter: alpha(opacity=50);
他のヒント
不透明度の構文は必要ありません。必要なことは、透明な画像を1pxまたは2pxより大きくすることです。最低でも20pxが機能します。主に、バックグラウンドリピートのある画像、特に空のスペースを埋めるために多くのリピートがある画像は、IE7を他のものよりもかなり遅くします。
ここで、プロジェクトで使用したオーバーレイのCSSを示します。
#siteol {
position: absolute;
z-index:10000;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
opacity: 0.7;
}
<!--[if IE]>
/* style for IE */
<style type="text/css">
#siteol {
filter: alpha(opacity=70);
}
</style>
<![endif]-->
PNGを削除するだけです。
まったく同じ問題があり、次のソリューションは、追加の不透明度属性を使用せずに完全に機能しました。 IEでフィルターを使用する必要がありますが、よりクリーンに感じます。
background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');
IEフィルターグラデーショントリックの優れた説明と、背景に不透明度属性を使用しない利点を以下に示します