Question

我在<html>上设置了一种风格：

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

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

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

Answer 1

html是一个正确的块级元素，就像body，p，div等一样 - 因此它会观察与其他块元素相同的所有溢出规则做。

然而，当内容溢出其宽度（或当其宽度小于浏览器窗口或视口的100％）时，html的背景渗出其边框的原因是因为背景颜色是传播到视口，该视口是包含html的画布及其呈现的所有内容。但是，边框仍然是html元素的一部分，因此当内容溢出时元素不会扩展。此行为非常类似于将背景应用于body，而不是html，导致正文背景无论如何都会传播到根元素，如this answer中所述引用{{3} }}

作为答案的this section of the spec Alohci，同样适用于html视口：

请注意，html相对于视口的行为方式与主体相对于html的行为非常相似，背景转义超出了html元素的范围。请参阅notes in a comment了解我的意思。

Answer 2

这是使用jquery

的一点修复

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

我知道单独使用css似乎不能正常工作是蹩脚的，但至少我们可以用jquery获得想要的结果。

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

Answer 3

防止这种情况的一种方法是使用css3自动换行属性。 Jsfiddle here

只需添加：

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

宽度小于其背景

3 个答案: