1

これにはまだCSSの問題があり、修正できないようです。ここにテストページを作成して、誰かが助けてくれるかどうかを確認しました。

html:

<div class="menu_background">
    <div class="menu">This is my menu</div>
</div>

CSS:

body {
background-color: #FFC;
margin:0;
padding:0
}
.menu_background {
background:url(images/headline.jpg) repeat-x;
}
.menu {
width:60em;
margin:0 2em;
border:solid 1px #F00;
color:#FFF
}

問題: ブラウザー ウィンドウを短くして 60em よりも小さくすると、奇妙なオーバーラップが発生します。

テスト ページを見ることができます。ここに 2 つのスクリーンショットがあります。

1. ブラウザがフルサイズの場合: ここに画像の説明を入力

  1. これは、ブラウザ ウィンドウを短くして右にスクロールしたときです。 **ここに画像の説明を入力**

最善の方法は、私のテスト ページを見て、自分の目で確かめることです。

4

3 に答える 3

2

.menu_background { min-width:56em }

于 2012-05-20T09:36:08.723 に答える
1

それを避けるために、背景をメニューに直接入れてください

.menu {
  background:url(images/headline.jpg) repeat-x;
  width:60em;
  margin:0 2em;
  border:solid 1px #F00;
  color:#FFF
}

（レビュー）背景を100％持つ

.menu_background {
   background:url(http://phpblog.inutritie.ro/images/headline.jpg) repeat-x;
   min-width: 64em;
}
于 2012-05-20T09:42:02.717 に答える
0

Chrome、Mozilla、IE (最新バージョン) でテストしました。IEでのみ発生しているようです。

どうですか：

.menu_background {
    position:relative;
}

と

.menu {
    position:absolute;
}
于 2012-05-20T09:43:16.573 に答える