爲什麼我會得到一個寬度爲100％的水平滾動條？

與開始：爲什麼我會得到一個寬度爲100％的水平滾動條？

html, body 
{ 
    padding: 0; 
    width: 100%; 
    font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
}

鉻決定的寬度應該是1600像素，這比我目前的顯示器更廣泛的，更何況目前的Chrome窗口。我確信這是一個古老的栗子，但我沒有找到正確的樹。

我發佈了一個完整的例子git：//github.com/bimargulies/css-mystery.git。

一注：我的macbook被插入一個非常寬的顯示器，現在不是。 1600px在我看來與此有關，但我不知道如何讓它消失，除非重新啓動。

在鉻發育生物學工具，尋找有效的方式爲，我看到：

width: 1600px; 
    html, body - 100%

也就是說1600是非常神祕的。這是在重新啓動後。

編輯賓果：埋在樣式表的main.css，從別人我 '與' 工作，是 'minWidth：100em;'在身上。哎呀。

來源

2011-05-01 bmargulies

Chrome 10中的無提示：http://jsfiddle.net/kjzBQ/會爲您提供小提琴工作，還是會打破？ – 2011-05-01 16:18:10

@皮卡：你有「正常化的CSS」打勾。 – thirtydot 2011-05-01 16:19:15

@ thirty啊，我明白了！這是一個新功能，還是我一直忽略它？今天又有另一起案件扭曲了結果。 – 2011-05-01 16:20:38

爲了記錄，我認爲最好在答案中有實際的解釋。

還有一個CSS條款的方式下文件：

body 
{ 
    minWidth: 100em; 
}

我沒發現它和Chrome「計算樣式」框中不包含此在的的1600像素的「說明」相同的方式，它包括width款式。

來源

2011-05-01 23:04:20 bmargulies

您需要添加margin: 0以刪除body元素上的默認margin。

您確定您需要width: 100%？

html和body由於是block級別的元素而默認爲「全寬度」。

來源

2011-05-01 16:18:44 thirtydot

沒有。根據Chrome開發人員工具，內容仍然是1600px，比可用的屏幕空間要寬得多。發生的一切就是左邊緣消失了。 – bmargulies 2011-05-01 16:22:49

@bmargulies聽起來很奇怪，它適用於我，如果我應用@ thirtydot的建議。你碰巧有兩個屏幕？你的屏幕寬度是多少？你是否100％確定你的頁面內沒有元素，迫使它伸展？ – 2011-05-01 16:25:03

@bmargulies：http://fiddle.jshell.net/kjzBQ/2/show/light/ +開發者工具顯示'html'和'body'元素和我的窗口一樣寬：http：// i .imgur.com/8ze0F.png - 我認爲這裏還有其他的東西：o – thirtydot 2011-05-01 16:28:01

嘗試使用CSS復位......

http://meyerweb.com/eric/tools/css/reset/index.html

......將所有的CSS屬性爲默認值。

我希望這會有所幫助。
Hristo

來源

2011-05-01 17:00:05 Hristo

爲什麼我會得到一個寬度爲100％的水平滾動條？

回答

相關問題