問題描述
各瀏覽器計算不包含在普通流中的內(nèi)容元素的 scrollHeight 值時結(jié)果有差異。
造成的影響
造成不同瀏覽器下 scrollHeight 屬性返回值各有不同，從而可能使依賴這個數(shù)值的應(yīng)用功能點出現(xiàn)問題。
受影響的瀏覽器
IE Chrome Safari
問題分析
scrollHeight 最初是由 IE4.0 以上版本提供的私有屬性，至今為止所有主流瀏覽器均支持這個屬性。更多詳細內(nèi)容請參見 MSDN 描述：scrollHeight Property。
在 W3C HTML5 草案中，已將 scroll 系列屬性規(guī)范化，包括 scrollHeight，詳細內(nèi)容可參見：7.2 The scrollTop, scrollLeft, scrollWidth, and scrollHeight attributes。
正是由于他是個非標準屬性，各個瀏覽器對如何計算 scrollHeight 屬性的值存在歧義。
在 IE 中，若一個容器 'overflow' 特性值為 'visible'，容器內(nèi)的元素脫離了文本流，但該容器仍然是其包含塊，則在計算容器的 scrollHeight 的值時會考慮脫離了文本流的元素。
分析如下代碼：
<div id="A">
<span>content</span>
</div>
<script language="javascript">
alert(document.getElementById("A").scrollHeight);
</script>
代碼中 A 容器僅包含一個浮動流中的子元素，容器高度沒有設(shè)置采用 auto 值，子元素處于浮動流后，A 容器在正常流中沒有內(nèi)容，其實際高度為 0。
那么 scrollHight 應(yīng)該如何計算呢？ 請看下列瀏覽器實際計算值：
IEChrome Safari Firefox Opera
scrollHeight1000
明顯看出此種情況下 IE 中在計算容器的 scrollHeight 值時會考慮脫離了普通流的元素。
再看另一種情況，如果容器也脫離普通流，進入定位流后又該如何？
在 Chrome Safari 中，在 IE 中條件的基礎(chǔ)上，若容器的 'position' 特性不為 'static'，并且沒有創(chuàng)建新的 Block formatting context ，則在計算容器的 scrollHeight 的值時會考慮脫離了普通流的元素。
根據(jù) CSS 2.1 規(guī)范說明，當元素擁有絕對定位樣式后，會創(chuàng)建新的 Block formatting context，此時處于浮動流中的子元素可以被容器計算高度。所有瀏覽器均遵循這個規(guī)范，實際計算 scrollHeight 值相同。但是父容器擁有相對定位樣式時，是不會創(chuàng)建新的 Block formatting context 的。
分析如下代碼：
<div id="A">
<span>content</span>
</div>
<script language="javascript">
alert(document.getElementById("A").scrollHeight);
</script>
代碼中 A 容器處于定位流中，且僅包含一個浮動流中的子元素，容器高度沒有設(shè)置采用 auto 值，子元素處于浮動流后，A 容器在正常流中沒有內(nèi)容，其實際高度為 0。
那么此時的 scrollHight 應(yīng)該如何計算呢？ 請看下列瀏覽器實際計算值：
IE Chrome SafariFirefox Opera
scrollHeight1000
明顯看出當父容器在定位流中的情況下 IE Chrome Safari 中在計算容器的 scrollHeight 值時，均會考慮脫離了普通流的元素。
解決方案
確保讀取 scrollHeight 屬性的元素均創(chuàng)建了新的 block formatting context，或者此容器與內(nèi)部子容器處于同一文檔流中，以此避免各瀏覽器中讀數(shù)不同。