解决火狐浏览隐藏不了滚动条问题

1.里层容器的width多17px，外层容器溢出隐藏，能兼容各个浏览器

  1. .outContainer {
  2. 　　width:350px;
  3. 　　height:300px;
  4. 　　overflow: hidden;
  5. }
  6. .inContainer {
  7.    height:300px;
  8.    width: 367px;
  9.    overflow-x:hidden;
  10.    overflow-y:scroll;
  11. }

2.设置 scrollbar-width: none，可兼容

  1. .outContainer {
  2. 　　width:350px;
  3. 　　height:300px;
  4. 　　overflow: hidden;
  5. }
  6. .inContainer {
  7.    height:300px;
  8.    width: 350px;
  9.    overflow-x:hidden;
  10.    overflow-y:scroll;
  11.    scrollbar-width: none;
  12. }
  13. /* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
  14. .inContainer::-webkit-scrollbar{
  15.     display: none;
  16. }
  17. /*兼容火狐*/
  18. .inContainer {
  19.    scrollbar-width: none;
  20. }
  21. /* 兼容IE10+ */
  22. .inContainer {
  23.     -ms-overflow-style: none;
  24. }

html如下

  1. <body>
  2.     <div class="outContainer" >
  3.         <div class="inContainer">
  4.             <div class="inContent" ></div>
  5.             <div class="inContent inContent2"></div>
  6.             <div class="inContent" ></div>
  7.         </div>
  8.     </div>
  9. </body>

　　

　　

css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）的更多相关文章

  1. [CSS]overflow内容溢出

      定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...

  2. jqprint导入jqgrid表格时，内容溢出的原因以及解决方法

    jqprint在导入表格的时候,会将原表格的样式全部拉过来,所以说原表格(如jqgrid的表格)的内容在有滚动条的时候,必须得将宽度设置为100%(等百分比的宽度),不能设置成固定宽度,不然表格内容会 ...

  3. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  5. 解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题

    问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...

  6. css设置滚动条并显示或隐藏

    看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...

  7. CSS：overflow 内容溢出属性

    overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...

  8. 滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置

    原文:滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置 属性中将CanContentScroll设置为False,滚动时就不会跳了,会连续的滚动

  9. CSS基础 overflow 内容溢出部分显示效果

    属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条

随机推荐

  1. leetcode 将一个二维矩阵进行90度旋转

    import numpy as np import math if __name__ == '__main__': def rotate(matrix): n = len(matrix[0]) for ...

  2. Spark源码(1): SparkConf

    1. 简介 SparkConf类负责管理Spark的所有配置项.在我们使用Spark的过程中,经常需要灵活配置各种参数,来使程序更好.更快地运行,因此也必然要与SparkConf类频繁打交道.了解它的 ...

  3. utgard OPC 主要功能简介

    度娘还行,尽管不好用,但所有的开发人员不懈努力地写博客,能得到很多东西! 这里向所有未谋面的博主们致敬! 搜了一堆OPC资料,在这里整理一下,用一个封装类来说明utgard的主要接口.使用了java自 ...

  4. 建立自己的数据类型——C结构体归纳

    一.建立结构体类型 1.申明结构体类型 struct 结构体名 { 成员表列(类型名 成员名:); }: 例如: struct Person { char name; int age; char se ...

  5. MySQL中的日期和时间：使用和说明，以及常用函数

    1.首先需要注意: 1.1 MySQL中把日期和时间是分开的. 以字符串2007-12-31 00:59:59为例: 日期部分:2007-12-31.这部分也可以叫做一个日期表达式. 时间部分:00: ...

  6. 日期控件传到后台异常。日期数据格式是 Date 还是 String？

    问题:日期控件的时间,传到Controller层直接异常. 前台日期格式:YYYY/MM/DD,后台Java定义的时间类型:Date. 解决: 方法一:原因是Controller层的参数类型定义为 D ...

  7. spring的控制器如何跳转到指定的视图

    1.控制器代码 2.跳转代码 return "greeting"; 引号内为跳转的页面,默认不需要加html

  8. 41.进程池--Pool

    进程池 方便创建,管理进程,单独进程的Process创建,需要手动开启,维护任务函数,以及释放回收 进程池不需要这么麻烦,进程提前创建好,未来在使用的时候,可以直接给与任务函数 某个进程池中的任务结束 ...

  9. ztree根据ztreeId【节点id】设置展开、选中、触发点击节点事件

    有时候我们要默认选中某个节点,根据ztreeId // 这里的ztreeId就是ztree存放在页面的元素id,比如div的id // treeObj就是ztree对象 var treeObj = $ ...

  10. Redis-负载均衡

    摘要 在nginx里面配置一个upstream,然后把相关的服务器ip都配置进去.然后采用轮询的方案,然后在nginx里面的配置项里,proxy-pass指向这个upstream,这样就能实现负载均衡 ...