IE6下出现横向滚动条问题的解决方案
当我们在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下出现横向滚动条问题的解决方案的更多相关文章
- IE6下CSS常见兼容性问题及解决方案
1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
- WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。
类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的S ...
- 关于ie6下拖动滚动条时,div抖动的问题解决
你如果遇到了这个问题,算是你有福了. 首先说非ie6下的div不随滚动条变化而移动位置的. 1,首先在body中写足够多的文字,一直到浏览器出现滚动条.例如你可以拼命的放P,足够多的P标签 2建立一个 ...
- IE6下Png透明最佳解决方案(推荐) Unit PNG Fix
引自:http://www.yeeyan.org/articles/view/98510/67784 网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHeli ...
- li:hover在ie6下失效的解决方案
li:hover在ie6下是无效的,它只在ie7以下版本有效.要解决这个问题有两个解决方法.一个是用js来解决,但是这种方法我不喜欢,因为它必需把js代码和css代码都放在html文件中.第二种是在每 ...
- png格式的图片在IE6 下透明解决方案
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 style="FILTER: progid:DXImageTransform.Microsoft. ...
- JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...
随机推荐
- 如何在Ubuntu上安装gcc-6.3
装显卡驱动推荐 gcc 6.3 版本,其实linux上多个版本的gcc是可以共存的,需要的的时候切换就好,参加之前的博客 https://www.cnblogs.com/jins-note/p/951 ...
- SSM 框架-02-MyEclipse 2017 安装与破解
SSM 框架-02-MyEclipse 2017 安装与破解 现在在学J2EE,然后使用的工具就是 MyEclipse,现在就抛弃 Eclipse 了,我就不多说它俩的区别了,但是 MyEclipse ...
- eclipse设置模板及格式
1) 首先要有code_templates.xml 及 code_formatter.xml 两个文件,下面有代码,直接拷贝出来. code_formatter.xml: <?xml v ...
- [转]实现Hive数据同步更新的shell脚本
引言: 上一篇文章<Sqoop1.4.4 实现将 Oracle10g 中的增量数据导入 Hive0.13.1 ,并更新Hive中的主表>http://www.linuxidc.com/Li ...
- jsonp和ajax的区别
一.Ajax工作原理 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化.对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
- winform ComboBox控件反选
winform ComboBox控件反选:int index = comboBox1.FindString(textBox2.Text); comboBox1.SelectedIndex = inde ...
- January 07 2017 Week 1st Saturday
Procrastination is the thief of time. 拖延乃是光阴之窃贼. My parents always tell me that things ought to be d ...
- iPhone的设备名转换
def convertDeviceName(self, deviceName): """ 转换deviceName(如iPhone 6,2)为用户习惯形式(如iPhone ...
- Id vs Instancetype
我写了一篇 Id vs Instancetype的文章,欢迎访问!
- java 包(package)
package packageDemo2_5; public class packageDemo1 { String name;//同一个包里的类可以直接访问 //不同包里的类是不可以使用默认修饰符的 ...