css - غموض نصف قطر IE 11(لم يحدث في IE 9 و IE 10)




internet-explorer css3 (2)

لقد بحثت عن أسئلة مشابهة تتعلق بنصف قطر الحدود في IE 11 ، ولكن واحد فقط وجدت على موقع Microsoft IE Developer وصفت ما أنا حاليا تعاني منذ "الترقية" إلى IE 11. كان الجواب على المشاركة في هذا الموضوع ل تأكد من أن DOCTYPE كان HTML5 ، وليس Quirks.

أقوم حاليًا بإنهاء إعادة تصميم على موقع ويب ونعم ، إنه HTML5 ويحتوي على DOCTYPE الصحيح ، ولكن ما زلت أتلقى مشكلة غريبة مع نصف قطر الحدود. هناك إزاحة بمقدار 1 بكسل لكل عنصر تقريبًا قمت بتطبيق نصف قطر للحد فيه. إذا قمت بإلغاء تحديد نصف قطر الحدود ، فإن المشكلة تختفي وكل شيء على ما يرام ، ولكن هذا ليس مشكلة في IE 9 أو IE 10. فقط منذ IE 11 قبل بضعة أيام ، وقد ظهرت هذه المشكلة. لقد اختبرت على كل من ويندوز 7 مع آي إي 11 وويندوز 8.1 مع آي إي 11 ، والمشكلة موجودة على كليهما.

مثال 1:

لدي border-radius: 5px 0 0 5px هنا ، ثم قم بتطبيق عناصر زائفة منفصلة: قبل و: بعد الحصول على المثلث المدبب ، ولكن يبدو أن نصف قطر الحد يكون إنشاء خط أبيض 1px ، لذلك لم يعد يتدفق مع بقية العنصر. هذا يعمل بشكل جيد حتى في IE 8 ، ولكن تم كسره الآن في IE 11. إذا قمت بإزالة نصف قطر الحدود ، يصبح عنصر المثلث الزائف متساوياً مع العنصر مرة أخرى.

المثال 2:

يحتوي زر رابط <a> المعروض ككتلة مضمنة على تدرج خطي للخلفية ، وحد أزرق متصل يبلغ 1 بكسل ، border-radius: 4px بكسل. لكن نصف قطر الحدود يخلق خط أبيض آخر بمقدار 1 بكسل داخل الحد الأزرق 1 بكسل. بغض النظر عن أي قيمة نصف قطر أخرى ، يبقى الخط الأبيض ما لم يكن نصف قطر الحدود هو 0.

المثال 3:

ثلاثة <a> تعيين عناصر الوصلة display: inline-block داخل <div> موضعي بالنسبة إلى <div> أسفله. يحتوي الجزء السفلي من <div> على border-radius: 4px ، بينما تحتوي <a> عناصر داخل الجزء العلوي <div> على نصف قطر حد أقصى اليسار واليمين (كما هو موضح). يعرض IE 11 فجوة 1 بكسل بين العنصرين <div> (كما هو موضح في مؤشر ترابط الملصقات الأخرى المرتبط أعلاه). ولكن إذا تم تحديد نصف قطر الحد في الجزء السفلي من <div> إلى 0 ، فإن الفجوة تختفي.

مرة أخرى ، لم تكن أي من هذه الحالات مشكلة في IE 9 و IE 10 ؛ فقط منذ وجود IE 11 هذه "فجوة 1px" مع عناصر لها نصف قطر دائري ظهر. لا أعرف كيف أصلحها. بالطبع لا تتأثر أي متصفحات أخرى. يعرض كل من فايرفوكس و Safari و Opera و Chrome كل ما هو جيد.

أي مساعدة سيكون موضع تقدير كبير.


أعتقد أنك نسيت نسيت خاصية إعادة تعيين العلامة في المغلق الخاص بك.

في الواقع IE يتم أخذ 1px Border تلقائيًا ، يجب كتابة خاصية إعادة تعيين في علامة img الخاصة بك css ، حد علامة: لا يوجد

مثل أدناه الرمز

img {border:none;outline:none}
a {border:none;outline:none}

بقدر ما أعرف هناك خلل مع border-radius في IE11. قد تكون المشكلة التي تصفها جزءًا من الصورة الأكبر. مزيد من المعلومات .





internet-explorer-11