أعتقد أن الجميع على دراية نسبيًا بالتعامل مع أخطاء CSS الشائعة، مثل: IE6 Three Pixel Gap، وIE5/6 Doubled Float-Margin Bug، وما إلى ذلك. لكننا غالبًا ما نواجه مشكلات معقدة في CSS BUG. ما يسمى بـ "معقد" يعني بشكل أساسي أن شروط التشغيل معقدة للغاية، ولا يعني "BUG" بالضرورة أنه خطأ في المتصفح. بالنسبة لهذا النوع من المشاكل، أول شيء نحتاج إلى حله هو كيفية تحديد موقع المشكلة، فقط من خلال تحديد موقع المشكلة بسرعة يمكننا حل المشكلة بشكل أفضل.
لتحديد الموقع بسرعة، تجربتي الشخصية بشكل عام هي كما يلي (يمكنها بشكل أساسي تحديد أكثر من 90٪ من مشكلات CSS BUG المعقدة التي واجهتها على Taobao):
1. تحقق مما إذا كانت تسمية الصفحة مغلقة،
لا تقلل من شأن ذلك. قد تسبب لك مشكلة CSS BUG التي لا تحل كل يوم، ولكنها تنبع فقط من هذا. بعد كل شيء، عادةً ما تكون قوالب الصفحات متداخلة بواسطة المطورين، ويمكنهم بسهولة حدوث مثل هذه المشكلات.
نصيحة سريعة: يمكنك استخدام Dreamweaver لفتح الملف للتحقق. بشكل عام، إذا لم تكن هناك علامات مغلقة، فسيتم تمييزها بخلفية صفراء.
2. طريقة استبعاد النمط:
قد تقوم بعض الصفحات المعقدة بتحميل ملفات CSS للارتباط الخارجي N، ثم تحذف ملفات CSS واحدة تلو الأخرى، وتبحث عن ملفات CSS المحددة التي تم تشغيلها بواسطة الخطأ، وتضييق نطاق القفل.
بالنسبة إلى ملف نمط CSS الذي به مشكلات والذي تم قفله للتو، احذف تعريفات النمط المحددة سطرًا تلو الآخر، وحدد موقع تعريف نمط المشغل المحدد، وحتى سمات نمط المشغل المحددة.
3. طريقة تأكيد الوحدة
في بعض الأحيان يمكننا أيضًا البدء من عناصر HTML الخاصة بالصفحة. احذف وحدات HTML المختلفة في الصفحة وابحث عن وحدة HTML التي تسبب المشكلة.
4. تحقق مما إذا كان قد تم مسح العوامات أم لا،
في الواقع، هناك العديد من مشكلات أخطاء CSS الناتجة عن عدم مسح العوامات. من الضروري تطوير عادة جيدة لمسح العوامات. يوصى باستخدام طريقة مسح العوامات بدون علامات HTML الإضافية (حاول تجنب استخدام طرق مشابهة مثل overflow:hidden;zoom:1 لمسح العوامات، والتي ستكون مقيدة للغاية. ).
5. تحقق مما إذا كان قد تم تشغيل haslayout ضمن IE.
ترتبط العديد من أخطاء CSS المعقدة ضمن IE ارتباطًا وثيقًا بتخطيط IE الفريد. سيؤدي التعرف على haslayout وفهمه إلى الحصول على نتيجة مضاعفة بنصف الجهد المبذول في التعامل مع أخطاء CSS المعقدة. يوصى بقراءة ترجمة "عند وجود تخطيط" بواسطة old9 (إذا لم تتمكن من عبور GFW الرائع، يمكنك قراءة إعادة النشر باللون الأزرق)
نصيحة سريعة: إذا تم تشغيل haslayout، فستظهر الخصائص الموجودة في شريط أدوات مطور IE لأداة تصحيح الأخطاء سيتم عرض قيمة التخطيط هي -1.
6. تتمثل طريقة تصحيح أخطاء الحدود والخلفية،
كما يوحي الاسم، في تعيين حدود أو خلفية واضحة (عادةً سوداء أو حمراء) لعنصر التصحيح. تعد هذه الطريقة إحدى الطرق الأكثر استخدامًا لتصحيح أخطاء CSS BUG، ولا تزال قابلة للتطبيق على الأخطاء المعقدة. بأسعار معقولة وصديقة للبيئة^^
آخر شيء أريد التأكيد عليه للجميع هو أن تطوير عادات الكتابة الجيدة وتقليل العلامات الإضافية ومحاولة الالتزام بالمعايير الدلالية يمكن أن يوفر لنا الكثير من أخطاء CSS المعقدة في أغلب الأحيان ، نحن نخلق المشاكل لأنفسنا. أتمنى أن يبتعد الجميع عن الأخطاء وأن يعيشوا حياة أفضل وأفضل.