爲什麼getBoundingClientRect在IE和Firefox中給出了不同的值

我有一個Image控件，我需要在圖片控件的頂部放置一些元素。當我使用getBoundingClientRect（）時，它在IE（7,8和9）中工作，但它在Firefox和Chrome中給出了不同的值。是否有任何其他函數可用於獲取元素的邊界矩形？爲什麼getBoundingClientRect在IE和Firefox中給出了不同的值

來源

2012-04-19 Senan

引文從舊IE文檔getBoundingClientRect：「在微軟的Internet Explorer 5，窗口的左上角是在2,2-（像素）相對於所述真正的客戶。「這似乎仍然有效。

在IE9中，使用<meta http-equiv="x-ua-compatible" content="ie=edge"/>將左上角設置爲正確的位置（0,0）。

隨着d4rkpr1nc3的回答，您可以通過其他方法獲取這些值，但結果也取決於使用的瀏覽器。我認爲你需要一個稍微不同的方法來解決這個問題。檢查下面的代碼，它可能會給你一些想法。

<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;"> 
    <DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV> 
    <DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV> 
    <DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV> 
    <DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV> 
</DIV>

來源

2012-04-19 15:14:23 Teemu

你怎麼得到ie8給與鉻相同的值？ – SuperUberDuper

@SuperUberDuper我的答案的想法是，你可能不能。佈局模型在不同的瀏覽器中是不同的，特別是像IE8這樣的老版本。儘管你可以用數值來計算數值，但最好問你自己的問題，如何做到這一點。 – Teemu

好的謝謝!!!!!!! – SuperUberDuper

你可以使用偏移來做到這一點，就像這樣：

var top = element.offsetTop; 
var left = element.offsetLeft; 
var width = element.offsetWidth; 
var height = element.offsetHeight; 
var bottom = top + height; 
var right = left + width;

來源

2012-04-19 15:06:02 d4rkpr1nc3

不是。例如，'getBoundingClientRect'考慮了CSS轉換。 – tillda

的確如果沒有：offsetTop是相對於定位的父母的位置（如果有的話），因此任何具有位置：relative/fixed/absolute的父母都會影響偏移值（與來自domcument.body的偏移值相關，） – dougwig

這爲我解決了一個問題，當我們試圖從隱藏的iFrame中使用'range.getBoundingClient（）'並且Firefox和IE爲x/y/width/height返回全零（0）時。 @ d4rkpr1nc3 thx！ –

值可能在不同的瀏覽器，但getBoundingClientRect()略有不同的仍然是性能和精確度你最好的選擇。然而，它返回的座標是相對於視口而不是文檔，因此您需要考慮在窗口/文檔上使用滾動值的情況。

下面是關於這一個很好的博客文章：

http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx

大衛？馬克是這個東西好。這是他的從comp.lang.javascript尖端：

https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ

來源

2012-04-19 15:07:17