我在 <html>
上设置了样式:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
如果页面内容比页面宽,为什么边框停止了,背景却一直在继续?
这是一个显示问题的 fiddle :http://jsfiddle.net/rPGyc/3
最佳答案
html
是一个合适的 block 级元素,就像 body
、p
、div
等 —因此,它遵守与其他 block 元素相同的所有溢出规则。
但是,当内容超出其宽度(或当其宽度小于浏览器窗口或视口(viewport)的 100%)时,html
的背景会溢出其边框的原因是背景颜色传播到视口(viewport),它是包含 html
及其所有呈现内容的 Canvas 。但是,边框仍然是 html
元素的一部分,因此当内容溢出时该元素不会展开。此行为与如何将背景应用于 body
而不是 html
导致 body 背景传播到根元素非常相似,如 this answer 中所述。其中引用了this section of the spec .
作为Alohci notes in a comment在答案下,关于视口(viewport),这同样适用于 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 http://jsfiddle.net/GmAL4/4/ to see what I mean.
关于html - <html> 宽度小于其背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11083984/