閱讀868 返回首頁    go 阿裏雲 go 技術社區[雲棲]

IE,firefox下使用CSS屬性overflow的存在的不同

首先建立一個HTML文件用於測試用，代碼如下：
  1. <div>
  2. <pre><code>
  3. <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權</a>
  4. <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權</a>
  5. <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權</a>
  6. <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權</a>
  7. <a href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版權</a>
  8. </code></pre>
  9. </div>


一下為css代碼：

  1. div{
  2. width: 60%;
  3. }
  4. pre{
  5. overflow : auto ;
  6. background-color : #fff0f5 ;
  7. margin : 1.6em 0 ;
  8. padding : 0 1.6em ;
  9. } 
  
以上代碼在Firefox中的顯示是可以預料的。
但是在IE6中，沒有任何 overflow 效果能夠顯示出來，一下為IE六下的效果：


   

而在IE7中的顯示也有些不同，多了一個惹人討厭的右側滾動條，如圖：

  




    



     IE6的bug可以通過給containing block添加width的方法解決，即
  1. pre{
  2. overflow : auto ;
  3. background-color : #fff0f5 ;
  4. margin : 1.6em 0 ;
  5. padding : 0 1.6em ;
  6. width : 90% ;
  7. }

此時，IE6的滾動條出來了，但是它與IE7表現的一樣，多了一個右側滾動條。
多一個右側滾動條的原因在於：IE總是將底部滾動條添加在元素的總高度的內部，這樣使得元素的一部分高度被底部滾動條占據，不能完全顯示，所以IE就自動添加了右側滾動條使得元素被擋住的內容也能夠滾動後看到 。
最後為了去除IE右側的滾動條，我們給containing block添加以下CSS
  1. pre{
  2. overflow : auto ;
  3. background-color : #fff0f5 ;
  4. margin : 1.6em 0 ;
  5. padding : 0 1.6em ;
  6. width : 90% ;
  7. overflow-y : hidden ;
  8. } 
這樣我們就在IE中創造出了和Firefox、Opera和Safari同樣的 overflow : auto 效果。
在實際應用中，這一效果可以應用於所有固定格式的元素（通常為 pre 元素），最常見的是代碼塊。

最後更新：2017-04-02 00:06:38

  上一篇：go C#隨機數的使用
  下一篇：go linux程序退出時返回值的含義