Question

下面的代码在IE和Chrome中以及大多数FireFox安装中的offsetHeight产生15，但是我遇到了几个案例（到目前为止3台计算机），其中FF产生14.我卸载并重新安装了FF和仍然得到相同的结果。

<html>
<head>
<style type="text/css">

body {
    font-size: 12px;
}
</style>
</head>

<body>
    <span id="abc">ABC</span>

<script>
console.log(document.getElementById('abc').offsetHeight);
</script>

</body>
</html>

我已经比较了文本的实际像素高度，并且它们在浏览器之间是相同的。如果我在文本周围放置边框，则会显示Chrome在文本顶部和顶部边框之间留下三个像素（底部相同），而FF在顶部留下两个像素，在底部留下三个像素。有什么想法吗？

Answer 1

您的代码正在"quirks mode"呈现。尝试在第一行添加doctype以触发标准模式。这应该甚至可以解决渲染中的一些怪癖。同时考虑CSS resets以规范其他一些浏览器怪癖。

<!DOCTYPE html>
<html>
    <head>

我还要提到you don't need a DTD to trigger standards mode。您只需要doctype声明。

DOCTYPE在HTML5中保留为“通常无用，但必需”的标题，仅用于在常见浏览器中触发“标准模式”。

Answer 2

使用严格的doctype，并执行css reset：

* {
    margin: 0;
    padding: 0;
}

Answer 3

内联元素（例如<span/>。

）存在问题

如果添加此css，它将限制#abc元素的行高并将其显示类型更改为inline-block，以便它在某些方面仍然可以像内联元素一样：

#abc {
    display: inline-block;
    line-height: 12px;
}

这是我能提出的最佳解决方案，也是所有浏览器似乎都同意的解决方案。众所周知，.offsetHeight and .offsetWidth are inconsistent cross browser但是，我只能将问题与内联元素隔离开来，而不会深入研究W3C文档或错误报告。

为什么offsetHeight在Firefox中有所不同

3 个答案: