宽度小于其背景

前端之家收集整理的这篇文章主要介绍了宽度小于其背景前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在< html>上设置了一个样式:
html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

如果页面内容页面宽,为什么边框会停止,但背景会继续?

这是一个显示问题的小提琴:http://jsfiddle.net/rPGyc/3

解决方法

html是一个合适的块级元素,就像body,p,div等一样 – 因此它遵循所有与其他块元素相同的溢出规则.

但是,当内容溢出其宽度(或当其宽度小于浏览器窗口或视口的100%)时,html背景溢出其边框的原因是因为背景颜色传播到视口,这是包含html的画布及其呈现的所有内容.但是,边框仍然是html元素的一部分,因此当内容溢出时元素不会扩展.这种行为非常类似于将背景应用于正文而不是html,导致正文背景无论如何都会传播到根元素,如this answer中引用this section of the spec所述.

作为答案的Alohci notes in a comment,同样适用于关于视口的html:

Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html,with the background escaping beyond the confines of the html element. See 07004 to see what I mean.

猜你在找的CSS相关文章