IE6で要素が幅100％、高さを獲得

Question

<！> lt; ul <！> gt;でリンクの水平リストを作成しようとしています。ここで、すべて<！> lt; a <！> gt; display：blockであり、高さがあります。 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;の高さおよびdisplay：block（背景画像のため）を保持し、幅なし（アイテムの長さを柔軟にしたい）を維持する方法があるかどうかです。 IE6で水平リストを作成します。ありがとう！

Answer 1

子要素のフローティングは、必要な修正方法です：

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