固定宽度元素在Mac上折叠

Question

我正在使用Rails 4为我的兄弟，数字动画师创建一个网站。标题包含一个居中的标题和四个按钮导航栏，由ul和inline-block组成ed li s。为了使ul居中，我将宽度固定为526px。对我来说，在我的开发Linux机器上，使用Chrome，标题如下所示：

在部署到Heroku之后，我在我的Windows机器上检查了该页面：

我将链接发送给我的兄弟，他在使用Chrome的Mac上工作：

导航按钮折叠并进入第二行。现在，在我的计算机上，无论我如何调整页面大小，按钮都不会以同样的方式崩溃：

...什么？为什么？到底是怎么回事？我该如何解决这个问题？

---

这是标题代码，它有一些嵌入式ruby来帮助处理当前页面：

<div id="header">
    <div id="header_title">
        <a href="/" class="nolink">
        <p <% if current_page(request.fullpath) == 6 %> class="header_current_page" <% end %>>
            <span class="name">anSon adamS</span> | <span class="des"> Digital artiSt</span>
        </p>
    </a>
</div>
<div id="header_navbar">
    <ul class="navbar_ul">
        <li 
        <% if current_page(request.fullpath) == 3 %> class="current_page" <% end %>>
            <span class="li_wrapper">
                <a href="/design">3D Design</a>
            </span>
        </li>
        <li <% if current_page(request.fullpath) == 4 %> class="current_page" <% end %>>
            <span class="li_wrapper">
                <a href="/art">Digital Art</a>
            </span>
        </li>
        <li <% if current_page(request.fullpath) == 5 %> class="current_page" <% end %>>
            <span class="li_wrapper">
                <a href="/effects">Visual Effects</a>
            </span>
        </li>
        <li
        <% if current_page(request.fullpath) == 2 %> class="current_page" <% end %>>
            <span class="li_wrapper">
                <a href="/about">About</a>
            </span>
        </li>
    </ul>
</div>

相关的sass（s​​css）：

#header {
    ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
    width:526px;
    li {
        display:inline-block;
        text-transform: uppercase;
        padding:5px 15px;
        border-style: solid;
        border-top-style:none;
        border-bottom-style:none;
        border-right-color: rgba(40,40,40,1);
        border-left-color: rgba(255,255,255,0.2);
        border-width: 0px 2px 0px 1px;
        margin: 0px -2px;
        font-weight:bold;
        a {
            margin:5px;
            font-size:11pt;
            text-decoration: none;
            color: inherit;
        }
    }
    li:hover {
        color:$lightblue;
        background-color:#262620;
        text-shadow: 1px 1px 6px #2428AD;
    }
}

Answer 1

为什么不将ul设置为text-align: center？您根本不需要固定宽度。

http://jsfiddle.net/jPN8f/

Answer 2

如果您提供了html和css的生成输出，那么帮助您会更容易，但我会猜测。在padding元素上尝试减少横向li。从li { padding:5px 14px; }开始，如果14不这样做，则减少1px。

我有类似的问题，它在Safari（Mac和iOS）上打破了，但在其他任何地方都没有。我发现它是1px的横向填充（padding-left和padding-right）正在打破布局。以下是类似问题的测试用例：http://codepen.io/Tresva/pen/tfFjJ

Answer 3

我会删除ul上的宽度并应用text-align: center。如果不确定你在父div上有margin:0 auto。 - 未经测试