Элемент увеличивает ширину на 100% при увеличении высоты в IE6

Question

Я пытаюсь составить горизонтальный список ссылок с помощью <ul> где все <a> является display: block и имеет высоту.В IE6 он продолжает получать ширину 100% после того, как я установил высоту для <a>, превратив его в вертикальный список.

HTML:

<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;
}