当前位置:  编程技术>WEB前端

修正IE下使用CSS属性overflow的bug

    来源: 互联网  发布时间:2014-10-04

    本文导语:  我们要建立一个测试用HTML文件,以下是关键的代码片断 代码如下:                遵守我的版权          遵守我的版权          遵守我的版权          遵守我的版权          遵守我的版权       ...

我们要建立一个测试用HTML文件,以下是关键的代码片断

代码如下:

 
    
  
        遵守我的版权 
        遵守我的版权 
        遵守我的版权 
        遵守我的版权 
        遵守我的版权 
    
 
 
在以上代码中我将应用以下CSS

代码如下:

div{ 
   width: 60%; 


pre{ 
   overflow : auto ;  
   background-color : #fff0f5 ; 
   margin : 1.6em 0 ; 
   padding : 0 1.6em ; 


以上代码在Firefox中的显示是可以预料的。

但是在IE6中,没有任何 overflow 效果能够显示出来

图1 IE6下的效果

而在IE7中的显示也有些不同,多了一个惹人讨厌的右侧滚动条

图2 IE7下的效果

IE6的bug可以通过给containing block添加width的方法解决,即

代码如下:

pre{ 
    overflow : auto ; 
    background-color : #fff0f5 ; 
    margin : 1.6em 0 ; 
    padding : 0 1.6em ; 
    width : 90% ; 


此时,IE6的滚动条出来了,但是它与IE7表现的一样,多了一个右侧滚动条。

多一个右侧滚动条的原因在于:IE总是将底部滚动条添加在元素的总高度的内部,这样使得元素的一部分高度被底部滚动条占据,不能完全显示,所以IE就自动添加了右侧滚动条使得元素被挡住的内容也能够滚动后看到 。

最后为了去除IE右侧的滚动条,我们给containing block添加以下CSS
代码如下:

pre{ 
    overflow : auto ;  
    background-color : #fff0f5 ; 
    margin : 1.6em 0 ; 
    padding : 0 1.6em ; 
    width : 90% ; 
    overflow-y : hidden ; 


这样我们就在IE中创造出了和Firefox、Opera和Safari同样的 overflow : auto 效果。

在实际应用中,这一效果可以应用于所有固定格式的元素(通常为 pre 元素),最常见的是代码块。


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 颜色修正工具 delaboratory
  • javascript 正则修正符
  • android耳机左右声道接反具体修正方法
  • 精简淘宝客v2.1开源修正版 phpTaoke
  • 正则表达式模式修正符 比如/esi
  • 正则表达式模式修正符(/ies)
  • 对faq的修正--在linux下如何安装java环境.
  • c#调用qq邮箱smtp发送邮件(修正版)
  • php正则表达式的模式修正符和逆向引用使用介绍
  • php在线压缩与解压缩SWF文件的代码(修正版)
  • 正则表达式教程之模式修正符使用介绍
  • ASP超级链接和HTML函数正则表达式 修正版
  • 精确查找PHP WEBSHELL木马 修正版


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3