溢出：隐藏将内容正确推入

的问题是：

我有与一组的高度和宽度的制品标签：

.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

没有overflow: hidden： enter image description here

任何人都知道这是为什么？在铬，ie10和歌剧它就好了。

链接：链接删除

来源

2013-03-25 ptf

可以创建一个jsfiddle示例 – btevfik 2013-03-25 11:09:17

给子元素指定固定宽度。 – 2013-03-25 11:18:05

@btevfik我尝试过，但我无法重新创建它：/ – ptf 2013-03-25 11:56:19

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

<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/

跨浏览器的评论
火狐似乎在Chrome，IE，Safari浏览器/窗口，歌剧略有不同的方式处理浮动。其他人可能会对此有所了解。

来源

2013-03-25 14:21:19

谢谢，完美的作品。 – ptf 2013-03-25 16:46:38

非常欢迎，很高兴帮助！祝你的项目好运。 – 2013-03-25 17:15:25

尝试添加

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

对不起问题，但你为什么要使用2线，相同的选择？ :)

来源

2013-03-25 11:39:42 nomak22

这不起作用。我使用两个，因为在我的CSS我正在使用媒体查询，顶部选择器是一般和底部选择器是特定于媒体查询。 – ptf 2013-03-25 11:57:28

该问题来自前面的元素（'div.row'），与浮动内容有关，这些内容会折叠宽度并影响右边距。 – 2013-03-25 14:33:49

溢出：隐藏将内容正确推入

回答

相关问题