当我们在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. *.vue文件的template标签内使用form标签

    由于form表单有重复提交的问题,所以在vue文件内直接使用form标签时需要注意这个问题,否则会导致页面重复刷新跳转不成功的问题 解决方案: <form @submit.prevent> ...

  2. d3js selections深入理解

    D3 selections选择DOM元素以便可以对这些dom元素做相应的操作,比如:更改其style,修改其属性,执行data-join操作,或者插入.删除相应elements 比如,如果给定5个ci ...

  3. c#之委托事件(DelegateEvent)

    前面一章学习了委托以及多播委托,接下来我们来学习下委托事件. 在学习委托事件的前提下,得知道什么是观察者模式. 首先,我们来模拟一个场景:例如,当一只狗汪汪汪叫的时候,baby被吓哭了,刚好要偷东西的 ...

  4. 绘制虚线的UIView

    绘制虚线的UIView CAShapeLayer配合贝塞尔曲线可以绘制曲线,笔者继承了一个UIView的子类,并将该子类的backedLayer替换为CAShapeLayer,以此来实现绘制虚线的效果 ...

  5. 获取当前模块句柄(dll、exe)

    HMODULE getCurrModuleHandle(){ MEMORY_BASIC_INFORMATION info; ::VirtualQuery((LPCVOID)(&getCurrM ...

  6. Retrieving failed records after an SqlBulkCopy exception

    Let me start by saying that the idea I used in this article is not originally mine, but since I have ...

  7. PDF转WORD工具推荐:迅捷PDF转换器6.8版

    迅捷PDF转换器是一款功能强大的pdf转换成word转换器软件.它不仅支持pdf转换成word,word转pdf,还可以实现excel,ppt,jpg与pdf文件的一键式转换.有了它,你可以很轻松转换 ...

  8. 【Win10+eclipse+MinGW+QT安装教程】已有eclipse环境下配置QT插件出错详解

    (纪念一下装了一整天濒临绝望的自己[/doge]) (以下所有下载项一律使用32位) step1:下载安装eclipse.适配的jdk.MinGW和QT 1.下载32位eclipse for c++以 ...

  9. JVM线程状态,park, wait, sleep, interrupt, yeild 对比

    ---恢复内容开始--- JVM线程状态 NEW, RUNNABLE, BLOCKED, WAITING, TIMED_WAITING, TERMINATED BLOCKED是等待获得对象锁 WAIT ...

  10. ES 6 装饰器与 React 高阶组件

    关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...