問題描述

各瀏覽器計算不包含在普通流中的內容元素的 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技術專欄