3

我正在做一个小网站。

问题是：

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

.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中就可以了。

链接：链接已删除

4

2 回答 2

2

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

<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 略有不同。其他人可能对此有所了解。

于 2013-03-25T14:21:19.347 回答
0

尝试添加

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

对不起，你为什么要使用 2 行和相同的选择器？:)

于 2013-03-25T11:39:42.760 回答