問題描述

各瀏覽器計(jì)算不包含在普通流中的內(nèi)容元素的 scrollHeight 值時(shí)結(jié)果有差異。

造成的影響

造成不同瀏覽器下 scrollHeight 屬性返回值各有不同，從而可能使依賴這個(gè)數(shù)值的應(yīng)用功能點(diǎn)出現(xiàn)問題。

受影響的瀏覽器

IE Chrome Safari

問題分析

scrollHeight 最初是由 IE4.0 以上版本提供的私有屬性，至今為止所有主流瀏覽器均支持這個(gè)屬性。更多詳細(xì)內(nèi)容請(qǐng)參見 MSDN 描述：scrollHeight Property。

在 W3C HTML5 草案中，已將 scroll 系列屬性規(guī)范化，包括 scrollHeight，詳細(xì)內(nèi)容可參見：7.2 The scrollTop, scrollLeft, scrollWidth, and scrollHeight attributes。

正是由于他是個(gè)非標(biāo)準(zhǔn)屬性，各個(gè)瀏覽器對(duì)如何計(jì)算 scrollHeight 屬性的值存在歧義。

在 IE 中，若一個(gè)容器 'overflow' 特性值為 'visible'，容器內(nèi)的元素脫離了文本流，但該容器仍然是其包含塊，則在計(jì)算容器的 scrollHeight 的值時(shí)會(huì)考慮脫離了文本流的元素。

分析如下代碼：

<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 容器僅包含一個(gè)浮動(dòng)流中的子元素，容器高度沒有設(shè)置采用 auto 值，子元素處于浮動(dòng)流后，A 容器在正常流中沒有內(nèi)容，其實(shí)際高度為 0。

那么 scrollHight 應(yīng)該如何計(jì)算呢？ 請(qǐng)看下列瀏覽器實(shí)際計(jì)算值：

IEChrome Safari Firefox Opera

scrollHeight1000

明顯看出此種情況下 IE 中在計(jì)算容器的 scrollHeight 值時(shí)會(huì)考慮脫離了普通流的元素。

再看另一種情況，如果容器也脫離普通流，進(jìn)入定位流后又該如何？

在 Chrome Safari 中，在 IE 中條件的基礎(chǔ)上，若容器的 'position' 特性不為 'static'，并且沒有創(chuàng)建新的 Block formatting context ，則在計(jì)算容器的 scrollHeight 的值時(shí)會(huì)考慮脫離了普通流的元素。

根據(jù) CSS 2.1 規(guī)范說明，當(dāng)元素?fù)碛薪^對(duì)定位樣式后，會(huì)創(chuàng)建新的 Block formatting context，此時(shí)處于浮動(dòng)流中的子元素可以被容器計(jì)算高度。所有瀏覽器均遵循這個(gè)規(guī)范，實(shí)際計(jì)算 scrollHeight 值相同。但是父容器擁有相對(duì)定位樣式時(shí)，是不會(huì)創(chuàng)建新的 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 容器處于定位流中，且僅包含一個(gè)浮動(dòng)流中的子元素，容器高度沒有設(shè)置采用 auto 值，子元素處于浮動(dòng)流后，A 容器在正常流中沒有內(nèi)容，其實(shí)際高度為 0。

那么此時(shí)的 scrollHight 應(yīng)該如何計(jì)算呢？ 請(qǐng)看下列瀏覽器實(shí)際計(jì)算值：

IE Chrome SafariFirefox Opera

scrollHeight1000

明顯看出當(dāng)父容器在定位流中的情況下 IE Chrome Safari 中在計(jì)算容器的 scrollHeight 值時(shí)，均會(huì)考慮脫離了普通流的元素。

解決方案

確保讀取 scrollHeight 屬性的元素均創(chuàng)建了新的 block formatting context，或者此容器與內(nèi)部子容器處于同一文檔流中，以此避免各瀏覽器中讀數(shù)不同。

更多信息請(qǐng)查看IT技術(shù)專欄