قم بإنشاء ملف اختبار HTML بسيط جديد واختبر علامة ul li أدناه.
| وفيما يلي المحتوى المقتبس: <ul> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> </ul> <ul> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> <li><a href="#">القائمة 1</a></li> </ul> |
الاختبار 1. قم بتعريف css بالكود التالي، ويكون التأثير كما يلي
| وفيما يلي المحتوى المقتبس: عرض نسخة عادية إلى الحافظة؟ الجسم {حجم الخط: 12 بكسل؛ الهامش: 0} أول {نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ العرض: 120px؛} أول لي {الخلفية: أخضر؛ الارتفاع: 20 بكسل؛} أول لي أ {اللون: #fff؛الحشو:0 0 0 10px؛} الجسم {حجم الخط: 12 بكسل؛ الهامش: 0} أول {نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ العرض: 120px؛} أول لي {الخلفية: أخضر؛ الارتفاع: 20 بكسل؛} أول لي أ {اللون: #fff؛الحشو:0 0 0 10px؛} |
لقد وجد أن هناك مساحة فارغة على الجانب الأيسر تحت كل من IE5 وIE5.5، وتحت IE5 يكون تباعد الأسطر بين LI فارغًا، كما هو موضح أدناه
اختبار 2. قم بتعريف CSS كالرمز التالي
| وفيما يلي المحتوى المقتبس: عرض نسخة عادية إلى الحافظة؟ الجسم {حجم الخط: 12 بكسل؛ الهامش: 0} أول {نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛} أول لي {الخلفية: أخضر؛ الارتفاع: 20 بكسل؛ العرض: 120 بكسل؛} أول لي أ {اللون: #fff؛الحشو:0 0 0 10px؛} الجسم {حجم الخط: 12 بكسل؛ الهامش: 0} أول {نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛} أول لي {الخلفية: أخضر؛ الارتفاع: 20 بكسل؛ العرض: 120 بكسل؛} أول لي أ {اللون: #fff؛الحشو:0 0 0 10px؛} |
بالمقارنة مع الاختبار الأول، مجرد وضع width:120px; من تعريف ul إلى تعريف li يحل مشكلة المساحة الفارغة على الجانب الأيسر من IE5 وIE5.5، ولكن لا تزال هناك فجوة بين li في IE5. كما هو موضح أدناه
اختبار 3. قم بتعريف CSS كالرمز التالي
| وفيما يلي المحتوى المقتبس: الجسم {حجم الخط: 12 بكسل؛ الهامش: 0} أول {نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛} ul li {الخلفية: أخضر؛ الارتفاع: 20 بكسل؛ العرض: 120 بكسل؛ محاذاة عمودية: أسفل؛} أول لي أ {اللون: #fff؛الحشو:0 0 0 10px؛} |
بالمقارنة مع الاختبار الثاني، أضف محاذاة رأسية: أسفل تعريف li، فهذا أمر طبيعي في IE5، ويختفي تباعد الأسطر الفارغة بين li، ويكون التأثير هو نفسه في كل متصفح، كما هو موضح أدناه.
تلخيص
1. كيفية حل مشكلة قيام li بإنشاء تباعد أسطر فارغ ضمن IE5: إذا حدد li عرضًا، فأنت بحاجة إلى تحديد محاذاة عمودية: أسفل في li.
2. من الأفضل عدم تحديد العرض في UL، ولكن في LI أو DIV خارج UL.
3. أفضل طريقة لكتابة LI هي كتابة الارتفاع والعرض داخل li، بالإضافة إلى المحاذاة العمودية: Bottom (لخطأ ie5/win)، أو إضافة طبقة من div خارج ul وتحديد العرض، ثم داخل li ليست هناك حاجة لتحديد العرض والمحاذاة الرأسية: القاع؛ وسيكون العرض عاديًا (لن يتم إنشاء تباعد أسطر فارغ ضمن IE5)، ولكن لا يزال يتعين تحديد الارتفاع.