2

我一直在研究 CSS 菜单，它在除 Internet Explorer 之外的所有浏览器中都能正常工作。

问题可以在下面看到：第一个<li>元素没有正确对齐。事实上，它被推倒了。

#sub-navigation {
    background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #dfeaf1;
    border-left: 1px solid #dfeaf1;
    border-right: 1px solid #dfeaf1;
    border-top: 3px solid #ffffff;
}
#second-navigation li {
    border-right: 1px solid #cddfeb;
    padding-right: 14px;
    padding-left: 14px;
    margin-left: 0px;
    float: left;
    display: block;
    font-size: 11px;
    font-weight: none;
    font-color: #6b6b6b;
}

#second-navigation ul {
    position: absolute; 
    display: none;
    z-index: 999;
    background: #4e4e4e;
    border: none;
    border-radius: 2px;
    width: 80px;
    color: #FFFFFF;
}
<div id="sub-navigation">
        <ul id="second-navigation" class="leftside">
            <li>
                <a href="" title="Calendar"><center>Calendar</center>   </a>
            </li>
            <li>
                <a href="" title="HH Converter">HH Converter</a>
            </li>
            <li>
                <a href="" title="Poker Bonuses">Poker Bonuses</a>
            </li>
    </div>

任何人都知道如何解决这个问题，所以它可以在 Internet Explorer 中运行。

4

1 回答 1

0

不幸的是，我目前无法为您测试实际代码。测试站正在四处移动。根据经验和我的想法 - 有一些错误。

编码：

#sub-navigation {
    background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #dfeaf1;
    border-left: 1px solid #dfeaf1;
    border-right: 1px solid #dfeaf1;
    border-top: 3px solid #ffffff;
}
#second-navigation ul {
    position: absolute; 
    display: none;
    z-index: 999;
    background: #4e4e4e;
    border: none;
    border-radius: 2px;
    width: 80px;
    color: #FFFFFF;
    list-style:none;
}
#second-navigation li {
    border-right: 1px solid #cddfeb;
    padding-right: 14px;
    padding-left: 14px;
    margin-left: 0px;
    float: left;
    display: inline-block;
    font-size: 11px;
    font-weight: none;
    font-color: #6b6b6b;
    list-style-type:none;
}
#second-navigation li a {
    display:block;
}
#second-navigation .center {
    text-align:center;
}
<div id="sub-navigation">
        <ul id="second-navigation" class="leftside">
            <li>
                <a href="#" title="Calendar" class="center">Calendar</a>
            </li>
            <li>
                <a href="#" title="HH Converter">HH Converter</a>
            </li>
            <li>
                <a href="#" title="Poker Bonuses">Poker Bonuses</a>
            </li>
        </ul>
    </div>

这些变化是：

  • 除非您在某处进行了重置（例如 YUI 重置），否则 ul 和 li 应该包含列表样式：无；和列表样式类型：无；
  • 在 Internet Explorer 上，浮动：左；应附上 display:inline-block; 不显示：阻止；
  • 在大多数浏览器上，ap 和标签中的元素都可以工作...... IE
    通常会发出嘶嘶声。使用 CSS 声明一个文本对齐中心......无论如何你都应该这样做。

希望这会有所帮助！

在旁注中，CSS 明智...如果您希望链接居中而不是什么 - 摆脱所有填充和边距写入...浏览器以不同方式考虑填充和边距并且可能导致问题。

一个简单的：

a {
display:block;
line-height: 25px;
text-align:center;
}

会做的伎俩。

于 2012-07-13T18:36:24.277 回答