Question

我一直在使用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。

Answer 1

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

代码：

#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应该包括list-style：none;和list-style-type：none;
在Internet Explorer上，float：left;应该伴随着显示：内联块;不显示：阻止;
在大多数浏览器中，p和标签中的元素都可以使用... IE
通常会引发他的气势。使用CSS声明文本对齐中心... 无论如何你都应该这样做。

希望这会有所帮助！

侧面说明，CSS明智......如果你想要链接居中而不是什么 - 摆脱所有填充＆amp;保证金写入...浏览器考虑填充＆amp;利润率不同，可能导致问题。

简单：

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

会做的伎俩。

在Internet Explorer中使用css菜单的问题

1 个答案: