当我们在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. .NET开源论坛MvcForum推荐

    MvcForum算是Asp.net中开源论坛佼佼者之一.主要使用ASP.NET MVC 5 &Unity & Entity Framework 6,有较强的可撸性.是论坛开发者的不二之 ...

  2. Maximum Subarray 连续子数组最大和

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. Remove Duplicates from Sorted List 去除链表中重复值节点

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  4. [学习] nofollow

    [来源:百度百科 http://baike.baidu.com/view/1584081.htm] 简介 nofollow[1]是一个HTML标签的属性值.它的出现为网站管理员提供了一种方式,即告诉搜 ...

  5. 路飞学城知识点3缓存知识点之二redis

    redis:支持的字符类型多,可以做持久化 memchache:只能存储到内存中,不能做持久化,仅支持字符串类型. 参考博客 redis安装服务端: github安装包 安装客户端: pip inst ...

  6. 微信分享BUG

    WXFileObject fileObject = new WXFileObject(); fileObject.setContentLengthLimit(1024 * 1024 * 10); fi ...

  7. MVC实例分析1.1

    E_S源码百度云分享链接: http://pan.baidu.com/s/1dFHzEJv 思维导图源文件分享链接: http://pan.baidu.com/s/1hrAXGC8 简单PPT分享链接 ...

  8. 深入浅出SharePoint——常用的系统账号

    NT AUTHORITY\Authenticated Users添加此用户后所有windows认证的ad用户都被授权.注意添加的时候如果搜索不到,可以直接输入Authenticated Users,然 ...

  9. Centos 7 iptables配置

    systemctl status firewalld.service #检测是否开启了firewall systemctl stop firewalld.service #关闭firewall syt ...

  10. 020.1.1 collections集合工具类

    内容:常见需求以及使用—逆转比较器顺序,最值和同步方法 collections类的方法都是静态方法 强行逆转比较器的顺序例子: //##主函数.java List<String> list ...