CSS IE7 تراكب بطيئة

Question

وعندما كنت اضغط على زر يظهر تراكب. في فايرفوكس التراكب بسرعة، لا شيء خاص. ولكن في 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 (DocAddCommentBox). قد لا يكون هذا شعبة transparancy. كيف يمكنني حل هذا؟

وتحرير: الحل:

.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;
}

وفي أتش تي أم أل لقد استعملت:

<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>

Answer 1

هل هناك overlay.png على قناة ألفا / الشفافية؟ إذا كان الأمر كذلك، حاول ذلك من دون شفافية. من الذاكرة، IE بطيئة فظيعة في تقديم مثل هذه الأشياء.

ما أود القيام به هو استخدام CSS للشفافية.

وتعيين التعتيم مثل ذلك:

Opacity:0.5;

ومما يؤسف له انها ليست معتمدة في IE، لذلك يجب علينا أيضا أن استخدام مخصص IE السمة:

filter: alpha(opacity=50);

Answer 2

ولا تحتاج بناء الجملة التعتيم، كل ما عليك القيام به هو جعل الصور الشفافة الخاصة بك أكبر من 1PX أو 2px، سيكون الحد الأدنى 20px العمل. أساسا، والصور مع خلفية تكرار وخاصة تلك التي لديها العديد من يكرر لملء المساحة الفارغة التي يقدمونها IE7 بك أبطأ بكثير من الآخرين.

Answer 3

وهنا 'ق 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.

Answer 4

وكان لي نفس المشكلة بالضبط والحل التالي عملت على أكمل وجه دون أن يلعب مع السمة التعتيم إضافية. لا يزال يتطلب IE لاستخدام فلتر ولكن يشعر نظافة لي.

background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');

وثمة تفسير كبير للIE مرشح خدعة التدرج وفوائد لا تستخدم السمة التعتيم على الخلفيات يمكن العثور عليها أسفل

<وأ href = "http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/" يختلط = "نوفولو" > http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/