12

我已经设置了一个样式<html>：

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

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

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

4

3 回答 3

8

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

但是，html当内容超出其宽度（或当其宽度小于浏览器窗口或视口的 100% 时）时，背景会溢出其边框，这是因为背景颜色会传播到视口，即包含html所有渲染内容的画布。但是，边框仍然是html元素的一部分，因此当内容溢出时元素不会扩展。此行为与将背景应用于 的方式非常相似body，但不会html导致主体背景传播到根元素，如引用规范的本节的this answer中所述。

正如Alohci 在答案下的评论中指出的那样，这同样适用于html视口：

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

于 2012-06-18T15:21:42.390 回答
2

这是使用jquery的一个小修复

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

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

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

于 2012-06-18T15:15:05.187 回答
0

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

只需添加：

html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
于 2012-06-18T15:25:46.470 回答