Firefox 如何在FF和Chrome之间找到结果一致的div像素高度

背景故事：我有一个SVG画布，上面有一些多段线。我还有一些HTML

和

元素，它们需要相对于这些多段线精确定位

我首先将HTML元素放在SVG的

标记中，但我遇到了一个问题，因为IE根本看不到它们，Firefox也看不到

标记。所以我把它们从SVG中去掉，现在每个浏览器都能看到它们

到目前为止还不错。现在我知道的确保它们与多段线正确定位的唯一方法是使用CSS同时给出HTML元素和SVG画布的绝对位置

这是我的问题。在所有这些元素之上是一个header div。我希望整个SVG业务位于header之下一个合理的距离。比如说15px。但是由于SVG是绝对定位的，所以我需要知道头div的高度，以便将SVG和相关HTML元素放在正确的位置

我尝试了jQuery的

.height（）

方法和一些相关方法。问题是Firefox和Chrome给出了两种不同的结果。我知道这并不能反映两者之间的实际像素高度差异，因为我可以从视觉上看到FF中的标题稍高，而FF给出的高度读数较小

---

如何获得标题div的浏览器一致高度读数？或者至少有一个我可以用来在每个浏览器中将其他元素绝对定位在其下方相同距离处。

您可以尝试使用此功能

function getHeight() {
    return Math.min(
            Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
            Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.min(document.body.clientHeight, document.documentElement.clientHeight)
        );

}

或者简单地使用

document.documentElement.clientHeight

，在我用于测试的所有浏览器（Chrome、Firefox、Safari和Opera）中，它通常都能帮我完成测试

[编辑]上面的函数返回主体的宽度和高度，要将其用于任何div，请使用此函数

function getHeight(div) {
        return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);  
    }

你可以这样使用它

var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));

[edit2]请记住，根据浏览器的不同，div实际上可能有不同的大小

假设这是谷歌浏览器，顶部的绿色栏是导航栏，高度为75px。你有它在100%，填补你的屏幕，谁有1000像素的高度，你把一个100像素的div的顶部，并坚持一个100像素的div的底部的屏幕（与蓝色）。它们之间的紫色div的高度为725px

下面是firefox。它被放在同一个1000像素的屏幕上，同样是100%，但是它的导航栏有100像素的高度。在顶部和底部使用相同的100px蓝色div，紫色div在这里的高度为700px，不同于chrome

---

当然，这是一个非常非常简单的例子，我怀疑这是你的情况。但是，您可能会遇到类似的div放置问题，您应该尝试检查一下。

如果我有误解，很抱歉，但在我看来，这只会显示整个文档的高度。是这样吗？我需要得到一个特定div元素的高度。啊，对不起，你是对的。我将此功能用于文档，但您可以轻松修改它以将其用于任何div。我将编辑我的帖子并添加新功能谢谢回复。在我的几个div中，FF和Chrome的读数仍然不同。你知道我可以添加到参数列表中的任何其他高度属性，或者你列出的三个参数是如何计算的吗？嗯，这可能与你的div有关，而不是与方法有关。你不能发布一个JSFIDLE吗？举个例子，Firefox和Chrome的窗口高度不一样，所以如果你有一些div的排列，高度是以百分比计算的，基于窗口的总高度，每个浏览器上的div都有不同的高度。我在我的帖子中添加了一个例子，我仍然在研究我是如何出错的，但是我从我的div中删除了固定高度，并尝试了你的功能，结果成功了！你是对的-尽管FF渲染的div在视觉上具有更高的高度，并且生成的高度读数更低，但它确实为自己的渲染提供了精确的像素高度。也许FF和Chrome的浏览器“像素”与屏幕像素的比例不同？无论如何，非常感谢您的详细帮助。