1

以下代码在 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 在顶部留下两个像素，在底部留下三个像素。有任何想法吗？

4

3 回答 3

1

您的代码以“怪癖模式”呈现。尝试doctype在第一行添加一个来触发标准模式。这应该会消除渲染中的一些怪癖。还要考虑CSS 重置以规范其他一些浏览器怪癖。

<!DOCTYPE html>
<html>
    <head>

我还必须提到，您不需要 DTD 来触发标准模式。您只需要 doctype 声明。

DOCTYPE 在 HTML5 中保留为“大部分无用但必需的”标头，仅用于在普通浏览器中触发“标准模式”。

于 2012-07-23T21:43:46.657 回答
1

使用严格的文档类型，并进行 css 重置：

* {
    margin: 0;
    padding: 0;
}
于 2012-07-23T21:45:19.070 回答
0

这是内联元素的问题，例如<span/>.

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

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

这是我能想到的最好的解决方案，也是所有浏览器似乎都同意的解决方案。众所周知，.offsetHeight 和 .offsetWidth 跨浏览器不一致，但是，我只能将问题隔离到内联元素，而无需深入研究 W3C 文档或错误报告。

于 2012-07-23T21:57:19.110 回答