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 在您的 LI 上，如果您希望它们连续显示。

使用 padding/margin 调整它们之间的适当间距，并调整 line-height 以获得任何最终第二行的正确行为。

这样，您的 UL 不会占用空间，无需在列表末尾添加隐藏的 clear-element（这是您的另一种选择）

于 2008-11-11T16:28:57.247 回答
0

您正在浮动您的元素，因此它们的父级需要通过clearfix 'hack' 清除/重置流。

于 2008-11-11T16:46:39.440 回答
0

您使用的是什么 DOCTYPE？DOCTYPE 对浏览器的渲染方式有影响。

于 2008-11-11T16:17:35.613 回答
0

尝试将此 CSS hack 用于 IE6。

*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 回答