【原创】关于 body元素滚动条在各浏览器下显示一直性的问题

html 元素的滚动条问题
当元素 overflow 保存默认值时,ie6在html内侧出现滚动条,ie7在html外侧出现滚动条,ie8+没有滚动条,Firefox和Chrome也没有滚动条。

当 body默认值时 overflow: visible;
在内容没有溢出窗口的情况下,ie6+和 firefox及Chrome 是没有滚动条的。
但在内容溢出的情况下,ie6的html元素的滚动条会出现在元素内侧,ie7+,Firefox,chrome滚动条会出现在html元素的外侧。

当 body 元素的 overflow 设置为 scroll
滚动条是有了,但是在ie8+和Firefox,chrome滚动条都跑到了html元素的外侧,而且有个严重的问题,内容溢出body元素或浏览器窗口,
右滑动栏 却 没有 滑动条,这显然不是我想要的。

解决方法:
经过一番摸索尝试,为了滚动条能够在个浏览器下,显示效果一致,我采用了如下方法:
将 html 元素 和 body 元素 的高度设置为 100% 既 height:100%,
然后将 html 元素的 overflow 设置为 hidden ,然后 body 元素 的 overflow 属性的值 设置为: auto 或 scroll ,
这样做是必须的。
如果 body 不设置 overflow 值为 auto 或 scroll ,那溢出的内容无法使用滑动条浏览。然后,在对 body 元素,设置 margin:0;
这样我们的滑动条就在个浏览器中显示效果一致并且完美了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值