0

すべての <a> が display:block で、高さがある <ul> でリンクの水平リストを作成しようとしています。IE6 では、<a> の高さを設定した後も幅が 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に実装されていることが知られています。

私の質問は、<a> の高さと display:block (背景画像のため) を保持し、幅 (項目の長さを柔軟にしたい) を保持せず、IE6 で水平方向のリストを作成する方法があるかどうかです。ありがとう！

4

1 に答える 1

2

子要素をフローティングすることが、必要な修正になる場合があります。

#header li a, #header li a span {
  display:block;
  height:28px;
  float:left;
}
于 2009-01-06T03:35:43.517 に答える