0

我有一个导航菜单（仅 CSS，结构为列表），它在 Windows 机器上的 Firefox、Opera 和 Chrome 上运行良好。现在无法测试 Safari，但我有一个问题，列表的最后一个元素不适合 Internet Explorer 和 MAC 上的 Chrome 上的给定宽度（固定为 1000 像素）（请注意，它在 Windows Chrome 上运行良好） . 两种 Chrome 都是（接近）最新版本，所以这不是问题。

现在，如果问题只是 IE，我只需制作一个条件样式表并完成它。但是 Chrome 的东西困扰着我。所以这里是工作版本（在 Firefox 上拍摄）和损坏版本（在 IE 上拍摄）的截图：

好的 不好

这是导航菜单的 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。

4

2 回答 2

0

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

于 2013-07-03T18:44:02.660 回答
0

我的第一个猜测是这个问题与花车有关。由于不同系统和浏览器之间字体大小的差异，您的浮动元素在感兴趣的浏览器（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;
    ...
}

并减少左/右填充。

于 2013-07-03T18:46:44.710 回答