css - 当我缩短浏览器窗口时 CSS 重叠

Question

我仍然有一些 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。

您可以查看测试页面，这里有两个屏幕截图：

1.这是浏览器全尺寸的时候：

2. 这是我缩短浏览器窗口并向右滚动的时候：

最好的方法是查看我的测试页面并亲自查看。

Answer 1

.menu_background { min-width:56em }

Answer 2

避免将背景直接放在菜单中

.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;
}

Answer 3

我已经在 Chrome、Mozilla 和 IE（最新版本）中进行了测试。它似乎只发生在 IE 中。

怎么样：

.menu_background {
    position:relative;
} 

和

.menu {
    position:absolute;
}