html - 元素在IE6中获得100％的宽度和高度

我正在尝试使用

制作水平链接列表，其中所有都是display：block并且具有高度。在IE6中，在为设置高度后，它一直保持100％的宽度，使其成为垂直列表。

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 Strict。好吧，我可以在IE6中仅使用填充来工作，但是垂直填充在Safari中的实现方式不同于其他浏览器。

我的问题是，是否有一种方法可以保留的高度和display：block（由于背景图像）但没有宽度（我希望项目长度灵活）并在IE6中创建水平列表。谢谢！

最佳答案

浮动子元素可能是您需要的解决方法：



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