يكتسب العنصر عرضًا بنسبة 100% مع ارتفاع في IE6

Question

أحاول إنشاء قائمة أفقية من الروابط باستخدام <ul> حيث يتم عرض كل <a>: كتلة ولها ارتفاع.في IE6، يستمر عرضه بنسبة 100% بعد أن قمت بتعيين ارتفاع لـ <a>، مما يجعله قائمة رأسية.

لغة البرمجة:

<ul id="header">
    <li><a href="#"><span>ST.KILDA ROAD MEDICAL CENTRE</span></a></li>
    <li><a href="#"><span>Public Health Management</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD PSYCHOLOGY SERVICES</span></a></li>
    <li><a href="#"><span>OCCUPATIONAL ASSISTANCE SERVICE</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD Sports &amp; Physio</span></a></li>
</ul>

CSS:

#header {
    height:1%;
    overflow:hidden;
}
#header li {
    float:left;
}
#header li a, #header li a span {
    display:block;
    height:28px;
}

الامتداد مخصص لبعض صور الخلفية ذات تأثير التمرير، حاولت إزالتها وظل تصميمها قائمًا.

Doctype هو XHTML 1.0 صارم.حسنًا، يمكنني تشغيله في IE6 باستخدام الحشو فقط ولكن من المعروف أن الحشو الرأسي يتم تنفيذه في Safari بشكل مختلف عما هو عليه في المتصفحات الأخرى.

سؤالي هو ما إذا كانت هناك طريقة بالنسبة لي للاحتفاظ بالارتفاع والعرض: الكتلة (بسبب صور الخلفية) ولكن بدون العرض (أريد أن يكون طول العنصر مرنًا) لـ <a> وإنشاء قائمة أفقية في IE6.شكرًا!

Answer 1

قد يكون تعويم العناصر الفرعية هو الإصلاح الذي تحتاجه:

#header li a, #header li a span {
  display:block;
  height:28px;
  float:left;
}