当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现。究其原因是在ie6下,当内容过多出现垂直滚动条时,此时页面的宽度为其本来宽度加上滚动条的宽度,导致页面宽度超过100%,而出现横向滚动条,在ie7+浏览器中,会自动的识别滚动条,页面宽度为内容的宽度加上滚动条的宽度等于100%,而不会出现滚动条,这相当于是ie的滚动条bug(纯属个人见解,不对的地方还请指出,共同学习交流)。

解决上述出现的问题有以下几个方案

方案一:添加html{overflow-y:hidden;}样式

这种方案仅仅是把出现的横向滚动条隐藏了,并没有解决根本问题,而且还会出现不想要的效果(横向多余的内容会被隐藏掉),这是一种不好的解决方法。

方案二:添加html{overflow-y:scroll;}

添加这个样式,当页面内容超过页面高度时,会正常的显示垂直滚动条,而且不会出现横向滚动条,看起来是我们要的效果;可是页面内容不足以出现垂直滚动条的时候,我们会发现页面的右边会出现一条置灰样式的滚动条位置,这个看起来并不美观,不是我们想要的效果。不过最起码已经开始接近我们想要的效果了,比起第一种解决方案,他的效果还是好的。

方案三:通过jQuery实现

单纯的css样式已经不能满足我们的需要,通过第二个方案我们可以想到一种比较好的解决方法,我们可以判断当页面高度需要垂直滚动条时,把页面样式设置为overflow-y:scroll;这样是不是就会达到我们想要的效果,事实证明完全是ok的,

$(function () {
//解决IE6下 页面出现横向滚动条
if ($.browser.msie && $.browser.version == "6.0" && $("html")[0].scrollHeight > $("html").height())
$("html").css("overflowY", "scroll");
})

以上就是对页面出现横向滚动条的解决方法,只是针对我目前遇到的情况,方法肯定还有很多,以后有时间再慢慢补充,,,

(有人说谷歌浏览器有相对应的解决方法,时间有限,没去研究,在此标记下)

IE6下出现横向滚动条问题的解决方案的更多相关文章

  1. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  2. flex布局下el-table横向滚动条失效

    如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...

  3. html table表格列数太多添加横向滚动条

    HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...

  4. WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

    类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的S ...

  5. 关于ie6下拖动滚动条时,div抖动的问题解决

    你如果遇到了这个问题,算是你有福了. 首先说非ie6下的div不随滚动条变化而移动位置的. 1,首先在body中写足够多的文字,一直到浏览器出现滚动条.例如你可以拼命的放P,足够多的P标签 2建立一个 ...

  6. IE6下Png透明最佳解决方案(推荐) Unit PNG Fix

    引自:http://www.yeeyan.org/articles/view/98510/67784 网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHeli ...

  7. li:hover在ie6下失效的解决方案

    li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每 ...

  8. png格式的图片在IE6 下透明解决方案

    FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 style="FILTER: progid:DXImageTransform.Microsoft. ...

  9. JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...

随机推荐

  1. 命令行下运行 java someClass.class出现 “错误:找不到或无法加载主类someClass ” 的解决方案

    假设在C:\Java\code\目录下建立了如下 Test.java文件: package code; public class Test { public static void main(Stri ...

  2. 如何一键部署项目&&代码自动更新

    my-deploy : 由nodejs写的一个自动更新工具,理论支持所有语言(php.java.c#)的项目,支持所有git仓库(bitbucket.github等). Github 效果如何? 如果 ...

  3. Python Basics

    廖雪峰老师博客 1. 可变参数(例如 *nums),允许传入一个list 或 tuple,但是 关键字参数(例如 **kv),允许传入一个dict,具体可参考此页: 2. set与dict类似,但只是 ...

  4. OpenStack 学习笔记 (三)

    个人网站:臭蛋www.choudan.net 一直苦于不知道如何加入到开源社区参与开发,感受开源社区分布式协作开发和巨神们coding的魅力,特意在网上查了资料,直接指导的很少,还得的靠官网上的文档. ...

  5. 5 使用ip代理池爬取糗事百科

    从09年读本科开始学计算机以来,一直在迷茫中度过,很想学些东西,做些事情,却往往陷进一些技术细节而蹉跎时光.直到最近几个月,才明白程序员的意义并不是要搞清楚所有代码细节,而是要有更宏高的方向,要有更专 ...

  6. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  7. GPG error: http://extras.ubuntu.com trusty Release: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY F60F4B3D7FA2AF80

    今天在更新运行apt-get update的时候出现了如下的错误: W: GPG error: http://extras.ubuntu.com trusty Release: The followi ...

  8. 提示"libc.so.6: version `GLIBC_2.14' not found"

    启动php 提示"libc.so.6: version `GLIBC_2.14' not found",原因可能是glibc版本太低,php使用了较高的glibc版本引起的 1,首 ...

  9. Linux下部署配置Nginx

    1.安装工具包 yum install -y wget 下载工具 yum install -y vim-enhanced vim编辑器 yum install -y make cmake gcc gc ...

  10. 探寻IIS最大并发数

    原文链接,http://www.cnblogs.com/birdshover/archive/2009/08/16/1547025.html 原文评论值得一看!   测试系统Window 2003 S ...