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

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

代码如下:

<div> 
    <pre><code> 
        <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> 
        <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> 
        <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> 
        <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> 
        <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> 
    </code></pre> 
</div>

在以上代码中我将应用以下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 元素),最常见的是代码块。

(0)

相关推荐

  • Android PopupWindow 点击外面取消实现代码

    private void showPopupView() { if (mPopupWindow == null) { View view = getLayoutInflater().inflate(R.layout.newest_layout, null); mPopupWindow = new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); mPopupWindow.setFocusable(tr

  • Android入门之PopupWindow用法实例解析

    本文实例介绍一下PopupWindow对话框.PopupWindow是阻塞对话框,只有在外部线程 或者 PopupWindow本身做退出操作才可以执行.PopupWindow完全依赖Layout做外观,在常见的开发中,PopupWindow应该会与AlertDialog常混用. 先贴出本例中运行的结果图: main.xml的源码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln

  • android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍

    PopupWindow可以实现浮层效果,主要方法有:可以自定义view,通过LayoutInflator方法:可以出现和退出时显示动画:可以指定显示位置等. 为了将PopupWindow的多个功能展现并力求用简单的代码实现,编写了一个点击按钮左侧弹出菜单的功能,实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失,效果图如下: 源码: 1.PopwindowOnLeftActivity.java 复制代码 代码如下: package com.pop.main; import android

  • android PopupWindow 和 Activity弹出窗口实现方式

    本人小菜一个.目前只见过两种弹出框的实现方式,第一种是最常见的PopupWindow,第二种也就是Activity的方式是前几天才见识过.感觉很霸气哦.没想到,activity也可以做伪窗口. 先贴上最常见的方法,主要讲activity的方法. 一.弹出PopupWindow 复制代码 代码如下: /** * 弹出menu菜单 */ public void menu_press(){ if(!menu_display){ //获取LayoutInflater实例 inflater = (Layo

  • Android编程实现popupwindow弹出后屏幕背景变成半透明效果

    本文实例讲述了Android编程实现popupwindow弹出后屏幕背景变成半透明效果的方法.分享给大家供大家参考,具体如下: android中popupwindow弹出后,屏幕背景变成半透明这个效果很普通.实现的方法也很多.我使用的可能是最简单的一种,就是设置一下getWindows的透明度.不多说上代码 /** * 设置添加屏幕的背景透明度 * @param bgAlpha */ public void backgroundAlpha(float bgAlpha) { WindowManag

  • Android之用PopupWindow实现弹出菜单的方法详解

    在使用UC-WebBrowser时,你会发现它的弹出菜单跟系统自带的菜单不一样.它实现更多菜单选项的显示和分栏.其实,它的本身是PopupWindow或者是AlertDialog对话框,在里面添加两个GridView控件,一个是菜单标题栏,一个是菜单选项.菜单选项视图的切换可以通过适配器的变换,轻松地实现.点击下载该实例:一.运行截图:           二.实现要点:(1)屏蔽系统弹出的菜单:1.首先创建至少一个系统的菜单选项 复制代码 代码如下: @Override public bool

  • PHP has encountered a Stack overflow问题解决方法

    昨晚将一个disucz论坛进行转移后,发现打开的页面上回多一个PHP has encountered a Stack overflow 这个提示错误,进过翻译为"PHP遇到堆栈溢出".我就感觉奇怪了,新站没人访问的,怎么可能会溢出. 好吧去discuz官方论坛找找解决方法. 找到的第一解决方法,更新后台缓存,结果不行.接下来检查数据库配置文件,也没有错误.检查php权限也没有错误. discuz官网有人说是php版本太低了,个人对于这种人是比较反感的,这种说法比较扯淡.不用去验证了.

  • Android用PopupWindow实现自定义overflow

    本文实例为大家分享了PopupWindow实现自定义overflow的具体代码,供大家参考,具体内容如下 当Action Bar的Action放不下时,系统会将其收集在overflow中. 用hierarchyviewer查看系统自己生成的Overflow,发现它本身就是popupWindow. 所以我们也可以用popUpWindow来写自己的overflow实现更多功能,做出像微信一样的效果. 第一次写,废话有点多,还望多包涵. 效果(GIF演示在文章底部): 最右边的Action(那个三点菜

  • Android Animation实战之屏幕底部弹出PopupWindow

    Android动画的一个实战内容,从屏幕底部滑动弹出PopupWindow. 相信这种效果大家在很多APP上都遇到过,比如需要拍照或者从SD卡选择图片,再比如需要分享某些东西时,大多会采用这么一种效果: 那这种效果如何实现呢? 我们仿写一个这种效果的实例吧: 1)我们首先定义一下,弹出窗口的页面布局组件:take_photo_pop.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout

  • css之使table也能overflow:hidden

    css table 超出隐藏 table { width:*; table-layout : fixed ; } td { white-space:nowrap; overflow:hidden; } 固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,

随机推荐