.WIDTH（）返回4個像素太多

我有一個div：.WIDTH（）返回4個像素太多

<div class="frame" id="layer1"> ... </div>

與造型：

.frame { 
    position: absolute; 
    width: 380px; 
    height: 280px; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 
#layer1 { background-color: red; color: #fff; }

但這些都是我的結果：

$(".frame").filter(":first").width(); // 384 
$(".frame").filter(":first").outerWidth(); // 384 
$(".frame").filter(":first").innerWidth(); // 384

我明白他們都是相同的，因爲我的填充和邊距是0，但這個默認4px從哪裏來？

來源

2012-06-18 JeroenEijkhof

FireBug/Chrome元素檢查器報告的寬度是多少？ –

試試這個：['box-sizing：border-box']（http://www.css3.info/preview/box-sizing/）以確保它正好是380px，即使是填充也是如此。 –

在Chrome，Firefox和IE中我得到了380個：http://jsbin.com/isehud另外請注意，不需要執行'.filter（「：first」）'，jQuery * getters *總是隻能從集合中的第一個元素。（如果你確實需要這樣做，'.first（）'而不是'.filter（「：first」）'可能是更好的方法，或者'.eq（0）'。 –

它得到解決，謝謝你的迴應 - 它幫助！

還有其他的東西在等式中加上一個。感到愚蠢，甚至問這個問題，但你的答案和問題確實幫助我瞭解它的底部！我應該張貼整個腳本：

var layers = $(".frame"); 
console.log(layers); 

var totalWidth = layers.size() + layers.filter(":first").innerWidth(); 
console.log(totalWidth);

正如你看到的，問題出在layers.size() +，它應該是乘法，而不是加法和我應該早點看到它。

來源

2012-06-18 06:43:08 JeroenEijkhof

*「請閱讀編輯問題以得出結論。」*這對於[回答自己的問題]是完全正確的（http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-你自己的問題/）。正確的做法是將問題留作問題，並將答案發布在答案中。或者在這種情況下，因爲這只是一個錯誤，你可以標記你的問題，要求版主完全刪除它，如果你喜歡。 –

.WIDTH（）返回4個像素太多

回答

相關問題