爲什麼'填充'有時會在元素寬度內計數，有時不是？

Question

我已經做了一個小書籤，除其他外，在「popup」div中加載一個表單。我重新設置了我創建的每個元素上人類已知的每個CSS標籤，並且據我所知可以用firebug來檢查它，但沒有CSS標籤是「通過滲透」。然而，在某些頁時，輸入寬度包括其填充：

input.clientWidth = input.style.width 

其他頁面上，輸入寬度不不包括填充：

input.clientWidth = input.style.width + input.style.paddingLeft + input.style.paddingRight 

這樣，這裏是一個小的代碼片段：

input.style.width = '300px'; 
input.style.border = '1px solid grey'; 
input.style.padding = '20px'; 
alert(input.clientWidth); 

在某些頁面上，這提醒298（300 - 的1px寬的邊框），以及在其他頁面此提醒338（300 - 的1px寬的邊框+ 20 + 20）。這是什麼原因？更重要的是，我能做些什麼來獲得一致的行爲？

編輯：

這一切都是在同一個瀏覽器 - 火狐3.6.8

Answer 1

對於IE它可能是一些頁面在怪癖模式，其中盒模型是不使用的一個標準。

document.compatMode對於標準模式應該是CSS1Compat，對於怪癖模式應該是BackCompat。你可以根據這個分支進行計算。

顯然，如果您向我們展示了兩個不同的單獨頁面會有幫助，但由於它是一個書籤小程序，並且它在不同的網站上調用，所以它會有意義。

Answer 2

對於一致的行爲，那麼您可以填充，邊距和邊框到每一個寬度，即（僞）

totalWidth = input.width + input.padding + input.margin + input.border;

很明顯，你必須做一些字符串操作挑出整數那裏，然後添加它們。