Question

我正在尝试使用＆lt; ul＆gt;制作水平的链接列表其中所有＆lt; a＆gt;显示：块并具有高度。在IE6中，在为＆lt; a＆gt;设置高度后，它保持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中与其他浏览器不同。

我的问题是，我是否有办法保留身高和显示：阻止（因为背景图像）但没有宽度（我希望项目长度灵活）为＆lt; a＆gt;并在IE6中制作一个水平列表。谢谢！

Answer 1

浮动子元素可能是您需要的修复：

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

在IE6中，元素的高度增加100％，高度增加

1 个答案: