0

unboundsonics.comにアクセスして確認してください。

ヘッダーの上部とフッターの下部で、斜めのピンストライプが並んでいないことがわかります。すべてが<div>（<div id="wrap">正確には）タグに含まれており、そのマージンは水平方向と垂直方向に 15px で自動的に設定されます。

垂直マージンを自動に変更すると、この問題は発生しません。私が見落としているヒントや観察はありますか？

どんな助けでも大歓迎です！

PS: スクリプトとスタイルがごちゃごちゃしていることは承知していますが、進行中の作業です。明日締め切りのプロジェクトのラフバージョンが必要なだけです。

4

1 に答える 1

1

問題は、HTML と Body の両方に BG 画像を設定し、body が少し小さいため、並べられないことです。

簡単な修正として、bg を HTML のみに適用するように設定できます。

ただし、html と本文のマージンを 0px、html のパディングを 0px に設定し、本文のパディングを設定し、本文に bg を適用することをお勧めします。

編集

クイックフィックス:

body,html {
margin:0;
padding:0;
color:#B8C2C9;
background-image:url('bgstripes.png');
background-repeat:repeat;
}

への変更：

body,html {
margin:0;
padding:0;
color:#B8C2C9;
}
html {
    background-image:url('bgstripes.png');
}

また、デフォルトの動作であるため、background:repeat を使用する必要はないことに注意してください。

EDIT2

まあ、私は個人的に次のようなことをします：

body,html {
    margin:0;
    padding:0;
}
body{
    background:url(bgstripes.png) #B8C2C9;
    padding:15px 0 15px 0;
}
#wrap {
    width:900px;
    margin:0 auto;
    background:#0D1325;
    border:1px outset white;
}

通常、ボディに bg を配置しますが、コンテナーのマージンの代わりに、親にパディングを行う方がよいでしょう。特に親にパディングやボーダーがない場合、マージンはコンテナーの高さを引き出す必要がないためです。これは IE7 で確認できますが、おそらく下の余白が崩れるでしょう。

于 2012-06-15T03:46:30.740 に答える