html - 固定宽度元素在 Mac 上折叠

Question

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

部署到 Heroku 后，我在我的 windows 机器上检查了页面:

我将链接发送给我的兄弟，他在 Mac 和 Chrome 上工作:

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

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

---

这是 header 代码，它有一些嵌入的 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/