0

我给 body 和 div 相同的高度，宽度。我的CSS是

 body {
background-repeat: no-repeat;
background-color: maroon;
width: 1280px;
height: 670px;
margin: 0;

}

div {
background-color: yellow;
width: 1280px;
height: 670px;

}

我的html是

<body>
<div   id='slider4' class='swipe'>
<div>
<div style='display:block' >1</div>
<div style='display:none'><div>2</div></div>
</div>


</body>

但是当我在Firefox中打开它时，它会像这样显示，我不知道

html的大小=body的大小=div的大小

然后红色也超出黄色。

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

4

1 回答 1

1

栗色显示是因为出于向后兼容性的原因，默认情况下 html 元素从 body 元素中获取其背景色，而视口从 html 元素中获取其背景色。

CSS 2.1 规范说：

对于根元素是 HTML "HTML" 元素或 XHTML "html" 元素的文档，其 'background-color' 的计算值为 'transparent' 和 'background-image' 的计算值为 'none'，用户代理必须改为使用为画布绘制背景时，从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算的背景属性值，并且不得为该子元素绘制背景。

和

根元素的背景成为画布的背景并覆盖整个画布

您可以将 html 元素的背景颜色设置为“白色”，以阻止栗色区域超出 body 元素的高度。

于 2013-02-18T08:21:20.453 回答