<html> 宽度小于其背景答案

【问题标题】：<html> width is less than its background<html> 宽度小于其背景
【发布时间】：2012-06-20 11:45:26
【问题描述】：

我在<html>上设置了样式：

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

如果页面内容比页面宽，为什么边框停止了，而背景却一直在走？

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

【问题讨论】：

好问题！看起来<html> 和<body> 好像很特别，而且只适用于background-color。例如，渐变的作用不一样。
这是一个显示问题的小提琴：jsfiddle.net/rPGyc/3
我从未见过有人像这样为html 元素添加样式，只有在body 或更好的是，div 就在body 内部。我认为这样的div 会给您带来您想要的效果，但我不确定这是否能回答您的问题。
@minitech：你说得对，这两个元素很特别。甚至规范都称它们为Backgrounds of Special Elements。但是，渐变应该表现相同，因为它们是背景图像。事实上，整个背景层都应该传播，而不仅仅是background-color。据我所见，所有支持 CSS 渐变的现代浏览器的最新稳定版本都正确应用了它们。你在什么浏览器上测试？

标签： html css width

【解决方案1】：

html 是一个适当的块级元素，就像body、p、div 等一样——因此它遵守所有与其他块元素相同的溢出规则。

但是，当内容超出其宽度（或当其宽度小于浏览器窗口或视口的 100% 时）时，html 的背景会溢出其边框，这是因为背景颜色会传播到视口，它是包含html 及其所有渲染内容的画布。但是，边框仍然是html 元素的一部分，因此当内容溢出时该元素不会展开。这种行为非常类似于将背景应用于body，而不是html，会导致主体背景传播到根元素，如this answer 中所述，它引用了this section of the spec。

作为答案下的Alohci notes in a comment，同样适用于html 的视口：

请注意，html 相对于视口的行为方式与 body 相对于 html 的行为方式非常相似，但背景会超出 html 元素的范围。请参阅http://jsfiddle.net/GmAL4/4/ 了解我的意思。

【讨论】：

【解决方案2】：

一种防止这种情况的方法是使用 css3 word-wrap 属性。 jsfiddlehere

只需添加：

html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}

【讨论】：

【解决方案3】：

这里有一个使用 jquery 的小修复

 $("html").width($(document).width());
 $("html").css("border", "1px solid black");

我知道单独使用 css 似乎无法正常工作很糟糕，但至少我们可以使用 jquery 获得想要的结果。

这是小提琴：http://jsfiddle.net/rPGyc/5/

【讨论】：