打印

SD2023: IE Chrome Safari 在计算 'overflow' 特性值为 visible 的容器的 scrollHeight 的值时会考虑其内脱离了文本流的元素

作者:钱宝坤

标准参考

无。

问题描述

各浏览器计算不包含在普通流中的内容元素的 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 应该如何计算呢? 请看下列浏览器实际计算值:

  IE Chrome Safari Firefox Opera
scrollHeight 100 0

明显看出此种情况下 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 Safari Firefox Opera
scrollHeight 100 0

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

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.8
Chrome 6.0.472.11 dev
Safari 5.0.1
Opera 10.60
测试页面: float_scrollHeight.html
position_scrollHeight.html
本文更新时间: 2010-08-02

关键字

height 0 scrollHeight 高度