用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显示上下滚动条的css代码

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

修改div滚动条颜色的css代码

<div style="width:260px;height:120px; overflow-y:scroll; scrollbar-base-color:#ff6600;?border:1px solid;"> 这里是你要显示的内容 </div>

• SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色)
• SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部分的颜色)
• SCROLLBAR-SHADOW-COLOR(立体滚动条阴影的颜色)
• ?SCROLLBAR-ARROW-COLOR(上下按钮上三角箭头的颜色)
• ?SCROLLBAR-BASE-COLOR(滚动条的基本颜色)
• SCROLLBAR-DARK-SHADOW-COLOR(立体滚动条强阴影的颜色)