1

私は完全にCSSレイアウトの初心者ですが、側面が柔軟になるように、単に「固定幅」の中央の列（1つのdiv）である基本的なレイアウトを開始しようとしています。私はこれが反応的/反応的ではないことを知っていますが、私はまだ始めたばかりです。

だから私はたくさんの例をグーグルで試しましたが、FFとIE9の両方で機能する出発点を見つけることができませんか？始めたばかりで違うの？

これが私が試したシンプルなスタイルの最新の例です：

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#content { 
 width: 900px;
 color: #333;
 border: 0px solid #f5f5f5;
 background: white;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 600px;
}

したがって、これは非常に始まりですが、すでにFFはこれを中央に揃えていることを示していますが、IEはそうではありません。したがって、私が試したすべてのもの（つまり、左：50％とマージン-右：-461px、私が見つけた例として）はこれらに異なる影響を与えます。私はこれが非常に一般的な課題であることをあちこちで読みましたが、私が気付いていないいくつかの基礎ロジックがここにあるのではないかと心配しています。

これに関するどんな助けも大歓迎です！

編集：コメントをありがとう！私は次のものを持っていますが、これもIE（およびchrome）で機能しますが、FFでは機能しませんか？

css：

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #f5f5f5;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
 margin-left:auto;
 margin-right:auto;

}
#content { 
 width: 900px;
 color: #333;
 border: 2px solid #f5f5f5;
 background: white;
 padding: 10px;
 height: 600px;
 position:absolute;
 left:50%;
 margin-left:-461px;
}

#welcomeBanner{
    text-align:center;
    font-family:"segoe ui light","segoe ui","segoe";
    font-size:18pt;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:0px;
}

html：文字通りのみ：

    <div id="wrapper">
        <div id="content">
            <div id="welcomeBanner">Attempting to Learn This Stuff<div>
        </div>
    </div>

そのため、IE9とChromeでは、タイトルが中央に表示され、大きなボックスの中央が背景色で固定されています。FFでは何も表示されません。ページにスタイルがまったく適用されていないのが好きですか？私は頭の中でリンクタグを使用していますが、それは明らかにそこにあり、他の人のために働いていますか？

4

1 に答える 1

4 
body {
    width:100%
}

div {
    width: 900px;
    margin:0 auto;
}

動作するはずです

cf margin：autoを使用したIE9でのDivの中央揃え

于 2012-12-16T19:28:47.660 に答える