当前位置:首页 » 网站技术 » HTML & CSS

CSS让Firefox总是显示右侧滚动条

...

CSS让Firefox总是显示右侧滚动条

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

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

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

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

怎么让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不会出现双滚动条。

继续阅读
CSS标记网页导航中当前页效果
网页设计中div+css命名参考
常用CSS命名规则
发表评论

昵称:
最新评论
暂时没有评论!