溢出：隐藏推送内容正确

Question

我正在建立一个小网站。

问题是：

我有一个设置高度和宽度的文章标签：

.main-content-wrapper article { color: white; margin: auto; overflow: hidden; }
.main-content-wrapper article { width: 980px; height: 457px; font-size: 20px; }

在firefox和safari中，设置overflow: hidden时，整篇文章都会被推到右侧。

overflow: hidden：

没有overflow: hidden：

任何人都知道为什么？在chrome，ie10和opera就好了。

链接：链接已移除

Answer 1

如果我们看一下你的标记：

<div class="row">
    <div class="content-menu-wrapper">
        <nav id="content-menu">
            <ul>
                <li><a href="./article.html">HVA ER OUTPUT?</a></li>
                <li><a href="./article.html">HVOR ER OUTPUT?</a></li>
                <li><a href="./article.html">NÅR ER OUTPUT?</a></li>
            </ul>
        </nav> <!-- end content-menu -->
    </div> <!-- end content-menu-wrapper -->
</div>

<div class="row">
    <div class="main-content-wrapper">
        <article>
            <p>I love pudding jelly bear claw I love cookie 
               croissant pie.......</p>
        </article>
    </div> <!-- main-content-wrapper -->
</div>

在第一行中，您有content-menu，其中有浮动元素（<li>），这会导致行的宽度崩溃。因此，包含内容（<article>）的以下元素将流向菜单的右侧。

您可以通过在CSS中添加以下规则来解决此问题：

.content-menu-wrapper {
    background: url("../images/menu_background.png") repeat-x scroll 0% 0% transparent;
    overflow: auto:
}

overflow: auto会处理折叠的宽度，您的布局也会有效。

小提琴参考：http://jsfiddle.net/audetwebdesign/NEJKj/

跨浏览器评论
Firefox似乎与Chrome，IE，Safari / windows，Opera略有不同。其他人可能对此有一些了解。

Answer 2

尝试添加

float:left;  /* if you want to float this to left side */
margin: 0px auto; /* if you want to center it horizontaly */

抱歉问题 但为什么你使用相同选择器的2行？ ：）