IE6下出现横向滚动条问题的解决方案

Posted 2020-09-08 鱼爱水

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

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

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

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

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

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