Question

我有一个导航菜单（仅限CSS，结构化为列表），可在Windows机器上的Firefox，Opera和Chrome上正常使用。目前无法测试Safari，但我遇到的问题是列表的最后一个元素不适合Internet Explorer上的给定宽度（固定为1000px）和MAC上的Chrome（请注意，它在Windows Chrome上运行正常）。两个Chromes都是（接近）最新版本，所以这不是问题。

现在，如果问题只是IE浏览器，我只需创建一个条件样式表并完成它。但Chrome的事情让我很烦恼。以下是工作版本（在Firefox上拍摄）和破损版本（在IE上拍摄）的屏幕截图：

not ok

这是导航菜单的HTML和CSS代码，如果您认为有任何其他相关的CSS请告诉我。在我看来，文本正在引起问题。我试着摆弄字体重量，字体系列和字母之间的空格，但似乎没有什么可以解决这个问题。

<div id="rn-holder">
    <nav id="rolling-nav">
        <ul>
            <li><a href="http://www.domain.com/en/index.php" data-clone="Home">Home</a></li>
            <li class='has-sub '><a href="http://www.domain.com/en/my-team" data-clone="My Team">My Team</a>
              <ul>
                    <li><a href="http://www.domain.com/en/my-team" >Team Settings</a></li>
                                <li><a href="http://www.domain.com/en/account-settings" >Account Settings</a></li>
                              </ul>
        </li>
            <li><a href="http://www.domain.com/en/transfer-center" data-clone="Transfer Center">Transfer Center</a></li>
            <li class='has-sub '><a href="http://www.domain.com/en/browse-leagues" data-clone="Leagues">Leagues</a>
              <ul>
                    <li><a href="http://www.domain.com/en/browse-leagues" >Browse Leagues</a></li>
                <li><a href="http://www.domain.com/en/my-leagues" >My Leagues</a></li>
              </ul>
        </li>
            <li><a href="http://www.domain.com/en/rules-of-the-game" data-clone="Rules">Rules</a></li>
        <li class='has-sub '><a href="http://www.domain.com/en/statistics/players" data-clone="Stats">Stats</a>
              <ul>
                    <li><a href="http://www.domain.com/en/statistics/players" >Player Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/teams" >Team Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/members" >Member Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/clubs" >Club Stats</a></li>
                                <li><a href="http://www.domain.com/en/serie-a-standings-table" >Standings</a></li>
                <li><a href="http://www.domain.com/en/match-center/20/0" >Match Center</a></li>
                <li><a href="http://www.domain.com/en/player-injuries-and-suspensions" >Injury Report</a></li>
              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/season-dream-team/2012-13" data-clone="Dream Team">Dream Team</a>
              <ul>
                    <li><a href="http://www.domain.com/en/season-dream-team/2012-13" >Season Dream Team</a></li>
                    <li><a href='http://www.domain.com/en/round-dream-team/20' >Round 20 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/19' >Round 19 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/18' >Round 18 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/17' >Round 17 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/16' >Round 16 Dream Team</a></li>              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/choose-account-type" data-clone="Upgrade">Upgrade</a>
              <ul>
                    <li><a href="http://www.domain.com/en/choose-account-type" >Choose Account</a></li>
                <li><a href="http://www.domain.com/en/premium-accounts" >Account Types</a></li>
                <li><a class="getcoins" >Get Coins</a></li>
                <li><a href="http://www.domain.com/en/store" >Store</a></li>
              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/about-us" data-clone="About">About</a>
              <ul>
                    <li><a href="http://www.domain.com/en/about-us" >About Us</a></li>
                <li><a href="http://www.domain.com/en/contact-us" >Contact Us</a></li>
                <li><a href="http://www.domain.com/en/terms-and-conditions" >Terms & Conditions</a></li>
              </ul>
        </li>
        </ul>
    </nav>
</div>

这就是HTML（如您所见，下拉菜单，但它们的存在与否不会影响问题）。以下是样式（包括下拉列表样式，可能与此问题无关，但分享它们不会有害）：

#rn-holder{
    width:1000px;
    margin:10px 0;
    background-color:#ca1026;
    background-image:-webkit-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-moz-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-ms-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-o-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    font-weight:normal;
}

#rolling-nav {
    color:white;
    text-transform:uppercase;
    position:relative;
    font-size:12px;
    margin-left:2px;
}

#rolling-nav ul {
    height:50px;
    margin:0px 0px;
    padding:0px 0px;
    overflow:hidden;
}

#rolling-nav li {
    float:left;
    list-style:none;
    margin:0px 0px;
    padding:0px 0px;
}

#rolling-nav li:hover > a {
    margin-top:-50px;
    margin-bottom:1px;
}

*html #rolling-nav li a:hover{ /* IE6 */
    margin-top:-50px;
    margin-bottom:1px;
}

#rolling-nav a,
#rolling-nav a:before {
    display:block;
    margin:0px 0px;
    padding:0px 27px;
    line-height:50px;
    color:white;
    text-decoration:none;
    background-color:#ca1026;
    background-image:-webkit-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-moz-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-ms-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-o-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    position:relative;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    font-weight:normal;
}

#rolling-nav a:before {
    content:attr(data-clone);
    position:absolute;
    top:100%;
    left:0px;
    display:block;
    background-color:white;
    background-image:-webkit-linear-gradient(top, #ddd, white);
    background-image:-moz-linear-gradient(top, #ddd, white);
    background-image:-ms-linear-gradient(top, #ddd, white);
    background-image:-o-linear-gradient(top, #ddd, white);
    background-image:linear-gradient(top, #ddd, white);
    border-top:2px solid rgba(0,0,0,0.2);
    color:#333;
}

#rolling-nav a:hover {
    margin-top:-50px;
    margin-bottom:1px;
}

/*For dropdown sub Menu*/
#rolling-nav .has-sub:hover ul {
    display:block;
    list-style:none;
}

#rolling-nav .has-sub.hover ul {
    display:block;
    list-style:none;
}

#rolling-nav .has-sub ul {
    display:block;
    display: none;  
    position: absolute;
    height:auto;
    top: 50px;
    float:left;
    text-align: center;
    width:160px;
}

#rolling-nav .has-sub ul li {
    text-align: center;
    display:block;
    float:left;
    list-style:none;
    margin-top:0px;
    margin-bottom:0px;
    width:150px;
}

#rolling-nav .has-sub ul li a {
    border-top: 0 none;
    border-left: 1px solid #d2d2d2;
    font-size:12px;
    display:block;
    padding: 1px 1px;
    text-align: center;
    margin-top:0px;
    margin-bottom:0px;
    z-index:45;
    line-height:40px;
}

#rolling-nav .has-sub ul li span.premium {
    background: url('../images/star_yellow_small.png') no-repeat;
    float:left;
    height:9px;
    width:9px;
    position:relative;
    top:15px;
    left:8px;
}

#rolling-nav .has-sub ul li a:hover {
    background-color:#666666;
    background-image:-webkit-linear-gradient(top, #ddd, #666666);
    background-image:-moz-linear-gradient(top, #ddd, #666666);
    background-image:-ms-linear-gradient(top, #ddd, #666666);
    background-image:-o-linear-gradient(top, #ddd, #666666);
    background-image:linear-gradient(top, #ddd, #666666);
    color:white;
}

*{
    font-family:Arial, Helvetica, sans-serif;
}

有谁看到问题是什么？我不介意修复程序是否对IE无效，但我需要它可以在所有“普通”浏览器上运行，例如MAC上的Chrome。

Answer 1

这是li从字体中获取宽度的宽度，因为您没有指定li的宽度。如果你在这些浏览器中制作font-size：11px，你会看到最后的li出现。

Answer 2

我的第一个猜测是问题与浮动有关。由于不同系统和浏览器之间字体大小的差异，您感兴趣的浏览器（Mac Chrome）上的浮动元素略宽。因此，“关于”链接/元素由于以下原因而包裹在菜单的第二行：

#rolling-nav ul {
    height:50px;
    margin:0px 0px;
    padding:0px 0px;
    overflow:hidden; <-- hides the optional 2nd line of the menu
}

尝试让导航块更窄以确认这是问题所在。

我首先看一下：

#rolling-nav a, #rolling-nav a:before { 
    display:block;
    margin:0px 0px;
    padding:0px 27px;
    ...
}

并减少左/右填充。

列表元素不适合在IE和MAC的Chrome上提供空间

2 个答案: