1

私は次のようなULを持っています：

<ul class="popular-pages">
    <li><a href="region/us/california/">California</a></li>
    <li><a href="region/us/michigan/">Michigan</a></li>
    <li><a href="region/us/missouri/">Missouri</a></li>
    <li><a href="region/us/new-york/">New York</a></li>
    <li><a href="region/us/oregon/">Oregon</a></li>
    <li><a href="region/us/oregon-washington/">Oregon; Washington</a></li>
    <li><a href="region/us/pennsylvania/">Pennsylvania</a></li>
    <li><a href="region/us/texas/">Texas</a></li>
    <li><a href="region/us/virginia/">Virginia</a></li>
    <li><a href="region/us/washington/">Washington</a></li>
</ul>

そしてこのように見えるCSS：

ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; color:#526d3f 
}
ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none;
}

そのため、最近のブラウザーでは正常に機能していますが、IE6では次のようになっています。助言がありますか？ 代替テキスト

4

4 に答える 4

6

レイアウトの理由はおそらく、アンカーにフロートがあり、代わりにリスト項目に移動しているためです。

ul.popular-pages リー {
 フロート: 左;
}

LI で幅を設定していないので、フロートをスキップして、LI で display: inline を設定することをお勧めします。

padding/margin を調整してそれらの間に適切なスペースを確保し、line-height を調整して最終的な 2 行目の正しい動作を得ます。

そうすれば、リストの最後に隠された clear-element を必要とせずに、UL がスペースを占有しないという問題が発生しなくなります (これは他の選択肢です)。

于 2008-11-11T16:28:57.247 に答える
0

どのDOCTYPEを使用していますか？DOCTYPEは、ブラウザーのレンダリング方法に影響を与えます。

于 2008-11-11T16:17:35.613 に答える
0

IE6でこのCSSハックを使用してみてください。

*html ul.popular-pages li a { 
    display:block; 
    float:left; 
    border-right:1px solid #b0b0b0; 
    border-bottom:1px solid #8d8d8d; 
    padding:10px; 
    background-color:#ebf4e0; 
    margin:2px; 
    color:#526d3f 
}

*html ul.popular-pages li a:hover { 
    text-decoration:none; 
    border-left:1px solid #b0b0b0; 
    border-top:1px solid #8d8d8d; 
    border-right:none; 
    border-bottom:none;
}

次に、IE6のCSS定義を調整します

于 2008-11-11T16:20:26.590 に答える
0

要素をフローティングしているため、その親はclearfix 'hack' を介してフローをクリア/リセットする必要があります。

于 2008-11-11T16:46:39.440 に答える