Javascript 为什么Firefox中的offsetHeight有所不同_Javascript

Javascript 为什么Firefox中的offsetHeight有所不同

javascript

Javascript 为什么Firefox中的offsetHeight有所不同,javascript,Javascript,下面的代码在IE和Chrome中以及在大多数FireFox安装中的offsetHeight生成15，但我遇到过少数情况（到目前为止有3台计算机），其中FF生成14。我卸载并重新安装了FF，但仍然得到了相同的结果 <html> <head> <style type="text/css"> body { font-size: 12px; } </style> </head> <body> <span i

下面的代码在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>


身体{
字体大小：12px；
}
基础知识
console.log（document.getElementById（'abc'）.offsetHeight）；

我比较了文本的实际像素高度，不同浏览器的像素高度是相同的。如果我在文本周围加上边框，就会发现Chrome在文本顶部和顶部边框之间留有三个像素（底部也一样），而FF在顶部留有两个像素，在底部留有三个像素。有什么想法吗？

您的代码正在渲染中。尝试在第一行添加

doctype

，以触发标准模式。这将消除渲染中的一些怪癖。同时也要考虑规范其他浏览器的怪癖。

<!DOCTYPE html>
<html>
    <head>

我还必须提到这一点。您只需要doctype声明

DOCTYPE在HTML5中被保留为“基本上没有用处，但却是必需的”标题，只是为了在普通浏览器中触发“标准模式”

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

* {
    margin: 0;
    padding: 0;
}

这是诸如

之类的内联元素的问题

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

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

这是我能想到的最好的解决方案，也是所有浏览器都同意的解决方案。然而，这是一个众所周知的事实，我只能将问题隔离到内联元素，而没有深入到W3C文档或bug报告中。

对此并不完全确定，但我知道浏览器的行为有所不同。我见过人们在CSS的开头“重置”标签`p{margin:0；padding:0；}'然后为您需要的样式创建您自己的类。我仍然在Chrome和FF中得到一个不同的值，使用该修复：@BumbleB2na:your test在IE中返回14，在Chrome中返回15:（我还测试了一个可能的解决方法，从“”，但返回了相同的值。我想这会使这些属性无用。。。