將HTML元素的非px尺寸轉換為px in（IE問題）

Question

我正在嘗試獲取特定元素的邊框寬度。 只需從當前計算的元素樣式中讀取，即可輕松獲得邊框寬度樣式設置：

var styles = (
    document.defaultView && document.defaultView.getComputedStyle ?
    document.defaultView.getComputedStyle(de, null) :
    de.currentStyle
);

通過以下方式，讀取特定的邊框值非常簡單：

var top = styles.borderTopWidth;
var value = parseFloat(top);

一切都很好，只要您不使用IE ，我就可以在value變量中獲得頂部邊框寬度。 但是， 僅當以像素為單位設置邊框寬度時，此數字才與像素有關 。 如果不是（例如，是em ），則value具有該特定維度的編號。

我必須獲得以下兩個問題的答案：

1. 如何始終獲得以像素為單位的邊框寬度？
2. 如何計算以像素為單位的不同單位？

例

我准備了一個jsFiddle示例 ，您可以在其中查看DOM和jQuery報告的各種尺寸。 在不同的瀏覽器中運行它，您將看到IE中的差異。 Crome中的所有維數均為整數值，而Firefox則以浮點數計算邊距和填充，而邊界為整數。

順便說一句：頁邊距，邊框和填充都設置為2mm 。

Answer 1

大多數庫都可以為您解決此問題，例如YUI3。 如果您不想使用這些庫，那么至少您可以充分發揮它們的作用；）

http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html

其中包含的Awnser。

Answer 2

通常，您可以使用element.offsetWidth和element.offsetHeight獲得計算出的像素大小。 如果您要支持多種瀏覽器，這將有些敏感。 在這種情況下，請使用庫。 例如，使用jQuery，您可以通過以下方式獲得有保證的像素尺寸：jQuery（“＃theID”）。width（）。