为什么在chrome和firefox下scrollHeight的取值不同？

Question

我在使用reactJS开发一个图片画廊的应用，最中心的图片的绝对定位高度等于halfStageH - halfImgH，其中halfImgH是图片高度/2。

该图片在firefox和IE11下都居中（如上图），在chrome下居然跑到了最下面（如下图1）。检查后发现，这张图片在FF下的scrollHeight等于它显示的实际高度447，而在chrome下scrollHeight只有136（如下图2）。

请问为什么在chrome下，scrollHeight不等于它的实际高度呢？136px是从何而来，我毫无头绪，望大神解答。

Answer 1

我找到了出现这种情况的原因，是React Component在Chrome下的渲染速度太慢了，当componentDidMount执行时，使用findDOMNode获取到的组件对象属性还没有完全渲染出来，所以获取到的height值不等于其真实值。

在外面包覆一层window.onload可以解决这个问题。

Answer 2

对于标准盒模型来说，
div显示的高度的是它的content高度(height)，
offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom.
scrollHeight = height + paddingTop + paddingBottom - scrollbarHeight. （有滚动条）
scrollHeight = height + paddingTop + paddingBottom.（无滚动条）

所以对于标准盒模型， height 和 scrollHeight, offsetHeight 值要想相等，就不能设置padding，border也不能有scrollbar出现。