问题描述

各浏览器计算不包含在普通流中的内容元素的 scrollHeight 值时结果有差异。

造成的影响

造成不同浏览器下 scrollHeight 属性返回值各有不同，从而可能使依赖这个数值的应用功能点出现问题。

受影响的浏览器

IE Chrome Safari

问题分析

scrollHeight 最初是由 IE4.0 以上版本提供的私有属性，至今为止所有主流浏览器均支持这个属性。更多详细内容请参见 MSDN 描述：scrollHeight Property。

在 W3C HTML5 草案中，已将 scroll 系列属性规范化，包括 scrollHeight，详细内容可参见：7.2 The scrollTop, scrollLeft, scrollWidth, and scrollHeight attributes。

正是由于他是个非标准属性，各个浏览器对如何计算 scrollHeight 属性的值存在歧义。

在 IE 中，若一个容器 'overflow' 特性值为 'visible'，容器内的元素脱离了文本流，但该容器仍然是其包含块，则在计算容器的 scrollHeight 的值时会考虑脱离了文本流的元素。

分析如下代码：

<div id="A" style="background:red;">

<span style="width:100px;height:100px;float:left;">content</span>

</div>

<script language="javascript">

alert(document.getElementById("A").scrollHeight);

</script>

代码中 A 容器仅包含一个浮动流中的子元素，容器高度没有设置采用 auto 值，子元素处于浮动流后，A 容器在正常流中没有内容，其实际高度为 0。

那么 scrollHight 应该如何计算呢？ 请看下列浏览器实际计算值：

IEChrome Safari Firefox Opera

scrollHeight1000

明显看出此种情况下 IE 中在计算容器的 scrollHeight 值时会考虑脱离了普通流的元素。

再看另一种情况，如果容器也脱离普通流，进入定位流后又该如何？

在 Chrome Safari 中，在 IE 中条件的基础上，若容器的 'position' 特性不为 'static'，并且没有创建新的 Block formatting context ，则在计算容器的 scrollHeight 的值时会考虑脱离了普通流的元素。

根据 CSS 2.1 规范说明，当元素拥有绝对定位样式后，会创建新的 Block formatting context，此时处于浮动流中的子元素可以被容器计算高度。所有浏览器均遵循这个规范，实际计算 scrollHeight 值相同。但是父容器拥有相对定位样式时，是不会创建新的 Block formatting context 的。

分析如下代码：

<div id="A" style="position:relative; background:red;">

<span style="width:100px;height:100px;float:left;">content</span>

</div>

<script language="javascript">

alert(document.getElementById("A").scrollHeight);

</script>

代码中 A 容器处于定位流中，且仅包含一个浮动流中的子元素，容器高度没有设置采用 auto 值，子元素处于浮动流后，A 容器在正常流中没有内容，其实际高度为 0。

那么此时的 scrollHight 应该如何计算呢？ 请看下列浏览器实际计算值：

IE Chrome SafariFirefox Opera

scrollHeight1000

明显看出当父容器在定位流中的情况下 IE Chrome Safari 中在计算容器的 scrollHeight 值时，均会考虑脱离了普通流的元素。

解决方案

确保读取 scrollHeight 属性的元素均创建了新的 block formatting context，或者此容器与内部子容器处于同一文档流中，以此避免各浏览器中读数不同。

更多信息请查看IT技术专栏