修正IE下使用CSS屬性overflow的bug_經驗交流

我們要建立一個測試用HTML文件，以下是關鍵的程式碼片段

複製程式碼 程式碼如下:

 
    

<code>       cngtphpcn遵守我的版權  <br>        <a phpcna>遵守我的版權</a>  <br>        phpcnltphpphpY licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權  <br>        phpcnltcna href="http://creativecommons.org /cn/" rel="license">遵守我的版權  <br>    </code>phpcnltcn/prephpcngt> <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="28006" class="copybut" id="copybut28006" onclick="doCopy('code28006')">複製程式碼</a></span> 程式碼如下:</div><div class="codebody" id="code28006">
<br>div{  <br>   width: 60%;  }  <br><br>pre{  <br>   overflow : auto ;   <br>   background-color : #fff0f5 ;  <br>} <br>
</div><br>以上程式碼在Firefox中的顯示是可以預期的。 <br><br>但在IE6中，沒有任何 overflow 效果能夠顯示出來 <br><p class="image"><span class="description">圖1 IE6下的效果</span><a href="/upload/20080322141159510.gif"><img src="/static/imghwm/default1.png" data-src="/upload/20080322141159510.gif" class="lazy" title="IE6 overflow bug" alt="IE6 overflow bug "    style="max-width:90%"></a></p>
<p>而在IE7中的顯示也有些不同，多了一個惹人討厭的右側滾動條</p>
<p class="image"><span class="description">圖2 IE7下的效果</span><a href="/upload/20080322141202918.gif"><img src="/static/imghwm/default1.png" data-src="/upload/20080322141202918.gif" class="lazy" title="IE6 overflow bug" alt="IE7 overflow bug "    style="max-width:90%"></a></p>
<p>IE6的bug可以透過為containing block添加width的方法來解決，即<br></p><div class="codetitle">
<span><a style="CURSOR: pointer" data="5980" class="copybut " id="copybut5980" onclick="doCopy('code5980')"><u>複製程式碼</u></a></span> 程式碼如下:</div><div class="codebody" id="code5980">
<br>pre{  <br>    overflow : auto ;  <br>    background-color : #fff0f5 ;  <br em>    width : 90 % ;  <br>} <br>
</div><br>此時，IE6的滾動條出來了，但是它與IE7表現的一樣，多了一個右側滾動條。 <br><br>多一個右側捲軸的原因在於：IE總是將底部滾動條添加在元素的總高度的內部，這樣使得元素的一部分高度被底部滾動條佔據，不能完全顯示，所以IE就自動添加了右側捲軸使得元素被擋住的內容也能夠滾動後看到 。 <br><br>最後為了移除IE右側的捲軸，我們為containing block新增以下CSS <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="45501 " class="copybut" id="copybut45501" onclick="doCopy('code45501')"><u>複製程式碼</u></a></span> 程式碼如下:</div><div class="codebody" id="code45501">
<br>pre{  <br>    overflow : auto ;   <br>    background-color : #fff0f5 ; : 0 1.6em ;      width : 90% ;  <br>    overflow-y : hidden ;  <br>} <br>
</div><br>這樣我們就在IE中創造出了和Firefox、Opera和Safari效果。 <br><br>在實際應用中，此效果可以應用於所有固定格式的元素（通常為 pre 元素），最常見的是程式碼區塊。 <br><br>