لقد واجهت ذلك في إحدى الصفحات الأخيرة، وكنت أرغب في الأصل في استخدام الحدود لمحاكاة تأثير الخط المنقط لرسم التصميم، ولكن من الواضح أن تأثير الحدود ليس جميلًا مثل رسم التصميم. بالمناسبة، لقد درست الفرق بين المتقطع والمنقط.
بادئ ذي بدء، لفهم ذلك حرفيًا، يشير كل من المتقطع والمنقط إلى "الخطوط المنقطة".
متقطع: من شرطة، خط متقطع يتكون من شرطة
منقط: من نقطة (نقطة)، خط منقط يتكون من نقاط، ويسمى أيضًا خط منقط
بضع كلمات أخرى من هذا الهراء هنا، في الواقع، يمكنك الحصول على تجربة بصرية أكثر سهولة من خلال النظر في العرض التوضيحي .
الآن دعونا نتحدث عن الأخطاء ذات الصلة، بالطبع، تظهر هذه الأخطاء مرة أخرى بشكل رائع فقط في IE، والتي تتضمن IE6 وIE7 هنا.
الخطأ 1: ضمن IE6، يتصرف النطاق المنقط بعرض 1 بكسل مثل المتقطع. عندما يكون العرض أكبر من 1 بكسل، فإنه يتصرف بشكل طبيعي.
الخطأ 2: ضمن IE7، عندما يكون عرض الجوانب الأربعة هو 1 بكسل وتتواجد أي قيمة أخرى، فإن 1 بكسل المنقط يتصرف بنفس الطريقة المتقطعة. لن يحدث هذا الخطأ عندما يكون عرض الجوانب الأربعة كله 1 بكسل، أو قيم أخرى مختلفة غير 1 بكسل.
الخطأ 3: بالإضافة إلى ذلك، في IE6، عند سحب الصفحة، في بعض الأحيان سيتم توصيل الحد المنقط بمقدار 1 بكسل أو الحد المتقطع بمقدار 1 بكسل بخط متصل، وفي بعض الأحيان ستكون هناك فجوات.
لحل هذه الأخطاء، إما عدم استخدام النقاط المنقطة واستخدام المتقطعات مباشرة أو استخدام الصور بدلاً من ذلك، أو استخدام علامات ورموز إضافية لحلها.
نظرًا لأن هذه الأخطاء تحدث فقط عندما يكون عرض الحدود 1 بكسل، فيمكنك ضبط عرض حدود العلامة الخارجية المحيطة على 2 بكسل، وإضافة علامة داخلية، وتعيينها على حد لون خلفية محتوى 1 بكسل، ثم تعيين هامش أعلى/يمين/ أسفل/يسار: -1px؛ لتغطية حدود 1px المحيطة بالملصق الخارجي لتحقيق تأثيرات بصرية عادية. مطول جداً، مزعج، وعاجزة.
.ب6 {
الحدود: 2 بكسل منقط #000؛
الحشو العلوي: 0؛
}
.ب6 .الداخلية {
الحدود: 1 بكسل صلب #9c9c9c؛
العرض: 100%؛
الارتفاع: 100%؛
الهامش: -1 بكسل؛
الموقف: نسبي؛
مؤشر z: 100؛
}
يرجى الرجوع إلى العرض التوضيحي للحصول على التفاصيل
النص الأصلي: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html