على الرغم من أنه قد يكون هناك العديد من الأخطاء في المتصفح، إلا أن هذا لا يعني أن هناك أخطاء عندما تشعر بالاختلاف. قد تكون هناك أسباب عديدة للمشكلة، لذا يحتاج المنتج إلى طرق معينة لاستكشاف المشكلة وإصلاحها.
من الحكمة اختيار متصفح متقدم للاختبار، مثل Opera 9.2 أو Firefox 2.0 أو Safari 3.0، والذي يتمتع بدعم أفضل لـ CSS 2.1. لا تستخدم IE 6 كمتصفح الاختبار الوحيد، لأن IE 6 به أكبر عدد من المشاكل. وهو أمر غير مناسب جدًا للمنتجين (خاصة المبتدئين) لفهم مواصفات CSS 2.1 وتحديد ما إذا كان أداء المتصفح صحيحًا.
إذا كان الاختبار صحيحًا في المتصفحات المتقدمة، ولكن هناك مشكلة في IE، فيمكن تحديد أن المشكلة تكمن في IE.
إذا كان العرض في المتصفحات المتقدمة غير صحيح، فيمكنك أولاً اتخاذ الحكم الأولي التالي:
1. ما إذا كانت التهجئة صحيحة، يمكنك استخدام التحقق W3C أو وظيفة التحقق لبرنامج تحرير صفحة الويب للتحقق مما إذا كانت العلامات الموجودة في مستند HTML (X) متطابقة، وما إذا كان ترتيب التداخل صحيحًا، وما إذا كانت العلامات الفارغة مغلقة، وما إذا كانت تهجئة CSS صحيحة. يعد التداخل غير الصحيح والتهجئة غير الصحيحة من الأخطاء الشائعة جدًا.
نصيحة: يوجد الآن العديد من برامج التحرير التي يمكنها توفير وظائف التحقق (X)HTML وCSS، بما في ذلك ما إذا كان المتصفح يدعم سمات CSS، وما إلى ذلك. على سبيل المثال: Dreamweaver 8 أو أعلى، وTopStyle، والبرامج الأخرى.
نصيحة: يعد البرنامج الإضافي "Firebug" في Firefox أداة مفيدة للغاية، فهو لا يمكنه التحقق من صحة (X)HTML وCSS وJavaScript فحسب، بل يمكنه أيضًا عرض الإطارات ومواضع العناصر في الصفحة بشكل ديناميكي يعد مفيدًا جدًا لتصحيح أخطاء صفحات الويب الإضافية.
2. هل هناك DTD مناسب؟
في فصول أخرى من هذا الكتاب، تم التأكيد على أهمية DOCTYPE أكثر من مرة. يؤثر اختلاف DOCTYPE بشكل مباشر على تفسير المتصفح لـ (X)HTML وCSS.
3. هل يدعم المتصفح سمات CSS؟ على الرغم من أن المتصفحات الحديثة تدعم معظم مواصفات CSS 2.1 وبعض مواصفات CSS 3، كما تم تقديمها في الفصل السابق، إلا أن بعض سمات CSS لم يتم دعمها على نطاق واسع بواسطة المتصفحات، لذا عندما تدعم المتصفحات سمة معينة. لا يسري مفعوله، يرجى التأكد مما إذا كان المتصفح يدعمه.
4. قم بعزل المشكلة لتسليط الضوء على المنطقة التي بها مشكلة، مثل إضافة حد ملفت للنظر أو لون خلفية للعنصر.
إذا أدت إضافة الحدود إلى حل المشكلة، فهذه مشكلة هوامش متداخلة.
إذا تمت إضافة خلفية ولكن لم يتم عرض الخلفية، فقد يكون ذلك بسبب ميزات خاصة أو عدم إغلاق العنصر العائم.
حاول تعديل بعض السمات، وخاصة السمات التي تؤدي إلى تشغيل hasLayout الخاص بـ IE، لتحديد ما إذا كان هذا خطأ شائعًا في IE.
5. قم بإعداد اختبار أساسي إذا لم يحل ذلك المشكلة، فيمكنك نسخ ملف المشكلة وحذف ملف (X)HTML الإضافي، مع ترك الجزء الذي به المشكلة فقط.
احذف مشكلة التعليق داخل (X)HTML ومعرفة ما إذا كانت المشكلة قد انتهت.
قم بإزالة المسافات بين العناصر ومعرفة ما إذا كانت المشكلة قد انتهت.
ثم قم بالتعليق على ورقة الأنماط على شكل كتل حتى تختفي المشكلة، ومن ثم فإن النمط الذي تم التعليق عليه للتو هو المشكلة.
6. حل المشكلة بدلاً من حل الظاهرة: إن العثور على السبب الجذري للمشكلة وحلها هو الهدف النهائي، بدلاً من استخدام الاختراق المعقد لجعل صفحة الويب "تبدو جميلة" فقط لاستيعاب الأداء. إذا لم تقم بحل المشكلة من الجذر، فقد تواجه المزيد من المشكلات عند ترقية المتصفح. في الوقت نفسه، قد تتسبب القرصنة في ظهور مشكلات جديدة، خاصة تشغيل أو تجنب تشغيل سمة hasLayout الخاصة بـ IE.
قد تكون هناك طريقة أخرى للتفكير قادرة أيضًا على تجنب المشكلة، مثل إلغاء سمة الهامش للعنصر وتعيين سمة الحشو للعنصر الأصلي بدلاً من ذلك.
استخدم Hack فقط عندما لا يمكن حل المشكلة حقًا.