方法元素的寬度/高度

問：是否有這樣一個場景，getBoundingClientRect和window.getComputedStyle將在width或height有什麼不同？方法元素的寬度/高度

我剛在IE中發現一個不一致的width（見下），當元素有box-sizing其中window.getComputedStyle返回錯誤的值。

所以我想覆蓋只是width和height值從getBoundingClientRect但不知道是否有情況下，將失敗。問題（在IE碎）的

var box = document.querySelector('.box'); 
var gBCR_width = box.getBoundingClientRect().width; // always 200 
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE

來源

2014-07-10 Rikard

我沒有看過很長一段時間的IE瀏覽器，但在'getComputedStyl e似乎計算填充和邊框內的邊框，而其他瀏覽器在外面計算。 '200px - （10 + 10 border） - （10 + 10 padding）= 160px' – erosman

@erosman，謝謝你的反饋。是的，IE以自己的方式計算。你知道我在第一行寫的問題的答案嗎？ – Rikard

對不起，我不（但不是）但是...'getComputedStyle（）'從CSS獲取它的數據，因此數據在CSS中被硬編碼。 'getBoundingClientRect（）'是一個包含一組文本矩形的文本矩形對象。換句話說，它似乎是從對象的渲染中獲取數據。不同之處來自[CSS Box Model]（http://www.w3schools.com/css/css_boxmodel.asp），正如它在該頁面中所述：_「IE8和IE的早期版本，包括填充和邊框width屬性。要解決此問題，請將<！DOCTYPE html>添加到HTML頁面。「_ – erosman

是的，有這兩種功能之間的一些差異。

getBoundingClientRect()將返回一個文本矩形對象，該對象包含一組文本矩形（該元素返回getClientRects()的矩形的並集，即與該元素相關聯的CSS邊框）。後者getComputedStyle()將在應用所有CSS之後返回該元素的計算出的CSS樣式。

因此，最終的寬度和高度可能會有很大的不同。

例如，通過簡單地將一個transform該元素你已經改變由getBoundingClientRect()返回寬度：

http://jsfiddle.net/epW3c/

而且，即使你添加邊框或填充到你的元素時，寬度和高度在兩種情況下都會有所不同。

根據您要測試的IE版本，您可能遇到臭名昭着的Internet Explorer box model bug，這會導致元素尺寸的解釋錯誤。通過正確添加doctype，確保您沒有在quirks mode中運行您的頁面。

來源

2014-07-15 09:03:20 MMM

在IE的CSS padding: 10px;原因溢出，讓你的computedStyle的額外的大小..

而且IE從對象分別計算Borders。

此總結了與overflow:hidden;或box-sizing: border-box;導致價值減去走40px

現在差的答案，從而成爲200像素 - 40像素= 160像素。

注：這裏，如果我們去掉overflow:hidden將沒有任何區別的box-sizing:border-box原因設計不是從定義的高度和寬度的進一步增長。

我產生另一個fiddle 1（不填充），這也是

'computedValue：180像素'

而且隨着Border:0px的fiddle 2給出結果同其他瀏覽器..

我希望這清除什麼導致什麼在IE瀏覽器（IE有自己的想法，有時會導致開發人員的痛苦）

來源

2014-07-15 12:00:16 MarmiK

方法元素的寬度/高度

回答

相關問題