将背景图像居中到具有最小宽度的div，即使页面比div窄

Question

HTML

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

CSS

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

当我的浏览器变得比#inner的960px宽度窄时，这段代码很好地将我的背景图像集中在除了之外。在这个狭窄的浏览器案例中，＃inner和#outer按预期保持960px的宽度（给出一个水平浏览器滚动条），但#outer上的背景图像将自身置于浏览器窗口而不是#outer div。如何将背景图像保持在div的中心而不是浏览器窗口？

Answer 1

我实际上并不知道为什么会发生这种情况的真正答案，但如果你将宽度应用于外部，它现在将显示你想要的方式。这不是我认为该模型有效的方式。非常困惑：/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

好的，这也有效，但IE7或IE6不支持

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

这是一种非常奇怪的行为，但显然如果你有一个没有指定宽度的div，即使孩子比父母更宽，父母只会获得与屏幕一样宽的行为。