<html>寬度小於其背景

我給自己定一個風格上<html>：<html>寬度小於其背景

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

如果頁面的內容比網頁寬度，爲什麼邊界停止，但後臺繼續下去？

下面是顯示問題小提琴：是一個使用jQuery的

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

我知道它是瘸子是CSS似乎不能單獨工作正常，但至少我們可以有一點點修復http://jsfiddle.net/rPGyc/3

來源

2012-06-18 Marcin M

問得好！它看起來像''和''是特殊的，只有'background-color'。例如，漸變效果不盡相同。 – Ryan

這裏是一個小提琴，顯示出這個問題：http://jsfiddle.net/rPGyc/3/ – GregM

我從來沒有見過任何人像''這樣的'html'元素添加樣式，只有'body'或更好，坐在'身體內'的'div'。我認爲這將是一個'div'，它會給你想要的效果，但我不確定這會回答你的問題。 – cobaltduck

html是一個適當的塊級元素，就像body，p，div等 - 因此它遵守所有其他塊元素做同樣的溢出規則。

但是，當內容溢出其寬度（或其寬度小於瀏覽器窗口或視口的100％）時，html的背景流出其邊框的原因是因爲背景色被傳播到視口，這是包含html及其所有呈現內容的畫布。但邊界仍然是html元素的一部分，因此元素在內容溢出時不會展開。這種行爲與如何將背景應用於body但不是html非常相似，導致身體背景傳播到根元素，正如this answer中所述，其引用this section of the spec。

由於Alohci notes in a comment答案下，同樣適用於html相對於視口：

注意，HTML相對於在幾乎相同的方式將視表現爲體相對於表現爲HTML，背景超出了HTML元素的限制。看到http://jsfiddle.net/GmAL4/4/看我的意思。

來源

2012-06-18 15:21:42 BoltClock

這裏用jquery想要的結果。

這裏的小提琴：http://jsfiddle.net/rPGyc/5/

來源

2012-06-18 15:15:05 GregM

一種防止使用css3 word-wrap屬性的方法。的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; 
}

來源

2012-06-18 15:25:46

<html>寬度小於其背景

回答

相關問題