Internet Explorer - خاصية ظل التصفية تصنع النص الداخلي القبيح

I have a div with a box shadow in Internet Explorer (Internet Explorer 7 Internet Explorer 8) applied through following CSS.

box-shadow:        0px 0px 15px #FF00CC;
-o-box-shadow:     0px 0px 15px #FF00CC;
-moz-box-shadow:   0px 0px 15px #FF00CC;
-webkit-box-shadow:0px 0px 15px #FF00CC;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180),
        progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270),
        progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
background-color:#FFFFFF;
border:1px solid #FF00CC;

إنه يعطيه ظل صندوق ، لكنه يجعل النص الداخلي غير واضح وقبيح ، أي أن النص الأسود يفقد الحدة:

Enter image description here

وبدون خصائص ظل مربع ، سيكون الأمر كما يلي:

Enter image description here

كيف يمكنني جعل النص الداخلي عاديًا إلى جانب إعطاء ظل مربع div؟

0

2 إجابة

It can be overcome in Internet Explorer 8 by wrapping in an extra div inside the content with position:relative; and the text again has its glory:

<div class="shadow-box">
    <div style="position:relative;">Lorem ipsum dosectetur adipisicing elit</div>
    </div>

    .shadow-box {
        box-shadow:        0px 0px 15px #FF00CC;
        -o-box-shadow:     0px 0px 15px #FF00CC;
        -moz-box-shadow:   0px 0px 15px #FF00CC;
        -webkit-box-shadow:0px 0px 15px #FF00CC;
        zoom: 1;
        filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=0),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=90),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=180),
                progid:DXImageTransform.Microsoft.Shadow(Color=#ff99eb, Strength=7, Direction=270),
                progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
        background-color:#FFFFFF;
        border:1px solid #FF00CC;
    }

But in Internet Explorer 7 if you use shadow filter it removes cleartype property on font ,and doesnt have any fix as per my search

بفضل <�م> CSS صندوق الظل </م> و < م> <�وأ href = "http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/" يختلط = "nofollow"> كيفية محاكاة CSS3 box-shadow في IE 6-8 بدون JavaScript. .

2
وأضاف
إجابة رائعة ، تعمل بشكل جيد. ولكن بالنظر إلى أنها تتطلب قدراً هائلاً من العمل ، أعتقد أنني سأقوم بالتخلص من مرشحات ms للعناصر التي تحتوي على نص
وأضاف المؤلف foochow, مصدر

يمكنك إنشاء فارغة فارغة مع الظل ونقل النص من عنصر آخر فوقه. يمكنك استخدام الهامش السلبي أو الموضع المطلق.

1
وأضاف
يمكنك تعيين ارتفاع div بواسطة ECMAscript. إنه حل غريب ، ولكن ليس لدي أي فكرة عن كيفية القيام بذلك بشكل أفضل.
وأضاف المؤلف Václav Dajbych, مصدر
لم أكن أعرف طول النص الداخلي ، وسوف تختلف لذلك ، وارتفاعه ، للحصول على النص داخل التفاف من div مظلل سيكون الاضطراب
وأضاف المؤلف Jaideep Singh, مصدر