هناك العديد من الفوائد لاستخدام إطار عمل XHTML+CSS، ولكن هناك بالفعل بعض المشكلات سواء كان ذلك بسبب قلة الخبرة أو التفكير غير الواضح، سأقوم أولاً بتدوين بعض المشكلات التي واجهتها أدناه لإنقاذ الجميع من البحث.
1. تفسير نموذج BOX في mozilla Firefox وIE غير متناسق، مما يؤدي إلى اختلاف قدره 2 بكسل. الحل:
div{margin:30px!important;margin:28px;}
لاحظ أنه لا يجب كتابة ترتيب هذين الهامشين بشكل معكوس، وفقًا لـ Ajie، لم يتم التعرف على السمة المهمة بواسطة IE، لكن المتصفحات الأخرى يمكنها ذلك. لذلك، يتم تفسيره فعليًا على هذا النحو ضمن IE:
إذا تم تعريفdiv{maring:30px;margin:28px}
بشكل متكرر، فسيتم تنفيذ الأخير، لذلك لا يمكنك فقط كتابة هامش:XXpx!important
2. تفسير BOX لـ IE5 وIE6 غير متناسقين ضمن IE5. div{width:300px;margin:0 10px 0 10px;}سيتم تفسير عرض div على أنه 300px-10px (الحشوة اليمنى)-10px (الحشوة اليسرى). div هو 280 بكسل، بينما العرض على IE6 والمتصفحات الأخرى يتم حسابه على أنه 300 بكسل + 10 بكسل (الحشو الأيمن) + 10 بكسل (الحشو الأيسر) = 320 بكسل. في هذا الوقت يمكننا إجراء التعديلات التالية:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
لا أفهم تمامًا ما هو هذا /**/، أنا فقط أعرف يتم دعم كل من IE5 وfirefox ولكن IE6 لا يدعمهما. إذا فهم أي شخص ذلك، فيرجى إبلاغي بذلك، شكرًا. :)
3. تحتوي علامة ul على قيمة تعبئة بشكل افتراضي في Mozilla، ولكن في IE يكون الهامش فقط له قيمة، لذا فإن تحديدها أولاً:
ul{margin:0;padding:0;}
يمكن أن يحل معظم المشكلات.
4. فيما يتعلق بالبرامج النصية، سمة اللغة غير مدعومة في xhtml1.1، ما عليك سوى تغيير الرمز إلى:
هذا كل شيء.
5. إذا قمت بتعيين اتجاهات التعويم ومحاذاة النص في حاوية BOX لتكون هي نفسها:
{float:left;text-align:left;margin:0 0 0 200px;}
فيمكننا إجراء التعديلات التالية:
{float :left; محاذاة النص:left;margin:0 0 0 200px;display:inline;}