日期:2014-05-17  浏览次数:20749 次

用css来控制让Firefox浏览器总是显示右侧纵向的滚动条

http://hi.baidu.com/weforhappy/item/71b893aaddbc359d15107397

?

用css来控制让Firefox浏览器总是显示右侧纵向的滚动条

这几天更新我那个淘宝皇冠导购店一 直是在IE6,IE7,IE8下访问都是正常的,但就是在Firefox浏览器下访问时不出现纵向的滚动条,让人心烦。就到网上Google,Baidu了一下.发现了下面的有用的文章,就在页面上实验了一下还真是管用。所 以贴出来和大家一起分享下,如果你也遇到了这样的问题,就照此解决吧,还是很管用的。如果firefox下正常了,那谷歌浏览器下差不多也就正常了。

为什么要让Firefox浏览器总是显示右 侧滚动呢?

首先你应该去看看不同高度的网页在IE浏览器和Firefox浏览器中右侧滚动的表现。高度小的网页时,IE右侧滚动一样会存 在,相当于右侧滚动的占位,但Firefox和Opera等右侧滚动在高度比较 小的网页里面是显示的。总结一句,IE右侧滚动一直存在,Firefox等 就会根据网页的高度来显示右侧滚动

为什么要一直显示右侧滚动

网站里面会有很多网页,每个页面的高度会随着网页内容的多少而有所不同,这种情况在不同网页之间切换时,就会感觉到内容区来回移 位,一下向左一下向右,结果是阅读体验很好,我希望在网页之间切换时,只是内容的变化,而会感 觉到移位,这样右侧滚动一直存在的话就会出现移位现象。注意:这里指的移位是指眼睛感觉 的,一般居中的网页内容区域会随浏览器的宽度而改变,右侧滚动有时在有时不在,就会让浏览器的工作区域宽 度改变。

怎么让Firefox的右侧滚动一直存在 呢?

很简单,用CSS来控制,在CSS中加入

body{overflow-y:scroll;}

加了之后ff的右侧滚动就会一直存在了,但是在IE中(在IE6中测试的结果)就会看到两右侧滚动,那么怎么 办?就是要使这个CSS在IE中起作用,如下代码:

body{overflow-y:scroll!important;overflow-y:auto;}

先设置右侧滚动,然后再设置为自动,但前面有!important, 这个在IE6中是起作用的,但在Firefox等浏览器中是起作用的,什么作用?从字面上理解就是重要的意思,就是强调的意思,在多种设置同时存在时,Firefox会采用重要的设置, 就是前面的设置,而IE6中是采用后面的语句,换顺序解释。这样就实现了Firefox浏览器的右侧滚动一直存在, 而IE会 出现双滚 动hao352上网主页,欢迎您的使用和收藏。

?

?

?

div显示滚动条的css代码

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

效果如下:

显示滚动条的代码

?

div显示上下