JQuery Fadeto تسبب النص البقلمة في IE8 عندما يكون وزن الخط: جريئة

StackOverflow https://stackoverflow.com/questions/1865806

  •  18-09-2019
  •  | 
  •  

سؤال

أنا تلاشى، وفي الحف:

$('.formErrors').fadeTo('fast', 0); 
$('.formErrors').fadeTo('slow', 1);

ولكن عندما أقوم بذلك في IE 8، يبدو هذا القليل من CSS:

.formErrors li { font-weight: bold; }

يسبب النص للعودة مشوهة تماما: (الصورة أدناه)

http://www.newmania.com/images/error.jpg.

أتش تي أم أل أنا أطبق هذا هو:

<div class="formErrors">
There are errors in your submission. Please fix the following and try again:
<ul><li>Action is empty</li></ul>
</div>

إنه يعمل بشكل جيد في فايرفوكس. أي أفكار من فضلك؟

هل كانت مفيدة؟

المحلول

الحل الشائع هو تحديد لون الخلفية، إذا لم يكن لديك بالفعل صورة:
http://jsbin.com/axapa.

.formErrors {background-color:white;}

خيار آخر هو استخدام fadeIn و fadeOut: الرسوم المتحركة حتى القبيح، ولكن على الأقل ينتهي بشكل جيد: http://jsbin.com/aboxa.

نصائح أخرى

jQuery.fn.fadeIn = function(speed, callback) { 
return this.animate({opacity: 'show'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeOut = function(speed, callback) { 
return this.animate({opacity: 'hide'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeTo = function(speed,to,callback) { 
return this.animate({opacity: to}, speed, function() { 
    if (to == 1 && jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};

ستجاوز هذا الرمز بعض خصائص Fade في JQuery الخاصة ب IE. كنت قادرا على الحصول على Fadeto بنجاح للعمل بشكل صحيح في IE هنا: https://app.tekstme.com/signup/

أعرف أن هذا الموضوع قديم حقا لكنني وجدت حلا بسيطا. لم يكن استخدام الخلفية قابلا للتطبيق على حالتي لأنني أصبت بخلفية معقدة وراء النص الذي يجب أن يكون خلفيته شفافة. على أي حال، وجدت هذا العمل جيدا جيدا (رمز CSS لإضافة):

.formErrors{position:relative;}

استخدامu003C!DOCTYPE html> إصلاح هذه المشكلة بالنسبة لي في IE8. لا يزال النص مبدعا أثناء التلاشي ولكن بعد ذلك ينعم

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top