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： ここに画像の説明を入力してください

誰もが理由を知っていますか？クロムでは、ie10とオペラはそれで問題ありません。

リンク：リンクが削除されました

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 に答える