Question

在我的示例（下面的链接）中，当浏览器大小小于INNER DIV（960px）的定义宽度时，OUTER DIV的某些背景会神奇地消失。正如预期的那样，水平滚动条会启动，但是当您向右滚动时，您无法看到图像的缺失部分。我相信它与[margin：0 auto;]的INNER DIV属性有关，因为当INNER DIV从代码中取出时，OUTER DIV的背景显示它应该（它被截止，但没有滚动条））。

任何人都有任何想法为什么会发生这种情况......以及如何解决这个问题？：

http://ryanderson.com/stackoverflow/background/

Answer 1

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Background Problem</title>
<style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>

的CSS：

body {
    margin: 0 auto;
}
#outer {
    background: url("background-picture.jpg") no-repeat scroll center top transparent;
    height: 500px;
}
#inner {
    background: url("diagonal-lines.png") repeat scroll 0 0 transparent;
    height: 500px;
    margin: 0 auto;
    width: 960px;
}

在内部div上使用[margin：0 auto;]时出现背景颜色/图像错误

1 个答案: