< HTML>宽度小于其背景 [英] <html> width is less than its background
问题描述
我在< html> 上设置了一个样式：
$ b
html {
background：#ECECEC;
border：1px solid #FFFFFF;
$ b如果页面内容比页面宽，为什么边界停止，但背景继续？
这是一个小提琴，显示问题： http://jsfiddle.net/rPGyc/3
解决方案 html 是一个合适的块级元素，就像 body ， p ， div 等 - 因此它遵守所有与其他块元素相同的溢出规则。
然而，当内容溢出其宽度（或其宽度小于浏览器窗口或视口的100％）时， html 的背景会流出边界，这是因为背景颜色为传播到视口，该视口是包含 html 及其所有呈现内容的画布。但是，边框仍然是 html 元素的一部分，所以当内容溢出时，元素不会展开。这种行为与将背景应用于 body 但不是 html 非常相似，导致正文背景传播到无论如何都是根元素，如这个答案中所述，它引用规范的这一部分。 Alohci 评论中的注释答案，这同样适用于 html 相对于视口：
请注意， html在视口方面的行为与body相对于html的行为方式大致相同，背景超出了html元素的范围。请参阅 http://jsfiddle.net/GmAL4/4/ 以了解我的意思。
I've set a style on <html>:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
If the contents of the page are wider than the page, why does the border stop, but the background keep going?
Here's a fiddle that show the problem : http://jsfiddle.net/rPGyc/3
解决方案 html is a proper block-level element, just like body, p, div, etc — it therefore observes all the same overflow rules as other block elements do.
However, the reason why the background of html bleeds past its border when content overflows its width (or when its width is less than 100% of the browser window, or viewport), is because the background color is propagated to the viewport, which is the canvas containing html and all its contents that are rendered. The border remains part of the html element, however, so the element doesn't expand when the content overflows. This behavior is very similar to how applying a background to body, but not html, causes the body background to propagate to the root element anyway, as described in this answer which cites this section of the spec.
As Alohci notes in a comment under the answer, the same applies to html with respect to the viewport:
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 http://jsfiddle.net/GmAL4/4/ to see what I mean.
这篇关于< HTML>宽度小于其背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
