列表元素不适合在 IE 和 MAC 的 Chrome 上留出空间答案

【问题标题】：List elements don't fit into give space on IE and MAC's Chrome列表元素不适合在 IE 和 MAC 的 Chrome 上留出空间
【发布时间】：2013-07-01 14:18:04
【问题描述】：

我有一个导航菜单（仅 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。

【问题讨论】：

我自己无法在 MAC 上测试 Chrome，但我似乎记得过去遇到过这样的问题，但我认为是 IE 的问题。尝试删除所有元素之间的white space。您可以这样做 <li></li><li></li> 或保留新行这样做 </li><li>。我绝不喜欢这个解决方案，但值得一试。我知道img 标签和空白也会发生类似的情况。
我建议您查看kerning。我不了解 Mac Chrome，但我知道 IE 使用了一种名为 Cleartype 的技术。例如，对于我来说，“我的团队”在 IE 中大约 52 像素，在 Chrome 中大约 48 像素（缩放也改变了这一点）。

标签： html css macos internet-explorer google-chrome

【解决方案1】：

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

#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;
    ...
}

并减少左/右填充。

【讨论】：

我明白，我已经尝试减少填充并且列表适合所有浏览器。但是，如果我这样做，那么在 Firefox、Windows Chrome 等的列表右侧会有大约 30 像素的空白空间。我真的很想避免这种情况，所以基本上我想强制字体大小/粗细在所有浏览器上都完全相同，而不是缩小范围，以至于在现在非常适合的浏览器上看起来更糟。你认为这可能吗？
如果您愿意接受 CSS3 属性，我会尝试使用 inline-block 或 table-cell 获取当前为 float: left 的 li 元素。但是，这将意味着对您的样式进行重大调整。请记住，如果用户在浏览器上点击 ctrl+ 并增加字体大小，那么您的菜单可能会变得难以与浮动一起使用，因为一个或多个导航链接可能会根据用户的首选字体换行到第二行 -大小设置，您无法控制。我会采用inline-block 或table-cell 方法。
我想这会起作用，但我认为单独固定所有列表元素的宽度并完成它实际上会不那么乏味......
如果您正在设计一个固定的页面布局，固定li 元素的宽度将是一个完全可以接受的方法。事实上，我会简单地修复使用display: block 的a 标签的宽度并设置它们的宽度并使用text-align: center 来保持文本水平居中。
是的，这是一个固定宽度的布局，所以这就是我要做的。我想说它也足够简单和有效。我只是希望有一个更优雅的解决方案，但是，唉，IE 又一次挫败了我。

【解决方案2】：

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

【讨论】：

谢谢，但请参考我对 Marc 回复的评论。
您需要指定字体，而不是提供 Helvetica、Arial 和 sans-serif 选项。这意味着，为了保证字体存在，您应该包含它并通过@font-face 链接到它。