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

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

.outContainer {

　　width:350px;

　　height:300px;

　　overflow: hidden;

}

.inContainer {

   height:300px;

   width: 367px;

   overflow-x:hidden;

   overflow-y:scroll;

}

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

.outContainer {

　　width:350px;

　　height:300px;

　　overflow: hidden;

}

.inContainer {

   height:300px;

   width: 350px;

   overflow-x:hidden;

   overflow-y:scroll;

   scrollbar-width: none;

}

/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */

.inContainer::-webkit-scrollbar{

    display: none;

}

/*兼容火狐*/

.inContainer {

   scrollbar-width: none;

}

/* 兼容IE10+ */

.inContainer {

    -ms-overflow-style: none;

}

html如下

<body>

    <div class="outContainer" >

        <div class="inContainer">

            <div class="inContent" ></div>

            <div class="inContent inContent2"></div>

            <div class="inContent" ></div>

        </div>

    </div>

</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. kubernets部署sock-shop微服务电商平台（11）

    一.准备条件 确保kubernetes可以访问:reg.yunwei.edu镜像库(vim /etc/hosts)   需要准备镜像:   [root@cicd sock-shop]# cat com ...

  2. mysql大数据量下优化

    1 优化sql和索引2 增加缓存如:redis3 主从复制或主主复制,读写分离4 利用mysql自带分区表5 先做垂直拆分,将一个大系统分为多个小系统,也就是分布式6 水平切分,要选择一个合理的sha ...

  3. LODOP中用ADD_PRINT_IMAGE缩放非图片超文本

    LODOP中HTML,URL,带有img标签的IMAGE,TBALE等打印项都属于超文本.关于LODOP中的纯文本和超文本,可查看本博客相关博文:LODOP中的纯文本和超文本打印项 ADD_PRINT ...

  4. Windows下Apache+PHP+MySQL搭建web服务器

    Apache+PHP+MySQL搭建服务器 工欲善其事必先利其器. 最近由于电脑出了问题不得不重新安装需要的文件,代码什么的都没了,以前也没怎么写过东西这回就先试试手,写的不是太好,希望大家不要介意哈 ...

  5. Python Requests库 form-data 上传文件操作

    请求数据示例: ------WebKitFormBoundaryKLoWgrA4O40MayHM Content-Disposition: form-data; name="id" ...

  6. Qt中mouseMoveEvent无效

    最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...

  7. jqGrid只向服务器请求一次的设置

    也就是说,在表格初始化时请求一次服务器,以后翻页就不再请求服务器,翻页的也只是初始化数据. 一次复制别人的代码时,一直不知道为什么翻页不请求服务器. 搞到人都爆炸,原来只是一个设置的地方. loado ...

  8. 正式发布！ .NET开发控件集ComponentOne 新版本加入Blazor UI

    近期,由葡萄城推出的ComponentOne .NET开发控件集正式发布最新版本! ComponentOne 是一套专注于企业 .NET开发.支持 .NET Core 平台,并完美集成于 Visual ...

  9. 宝塔面板liunx开启ssl域名后无法访问解决方法

    不打开宝塔面板的ssl会不安全,打开了就会提示ssl证书不能使用的错误 如下所示: 您的连接不是私密连接 攻击者可能会试图从 你的ip 窃取您的信息(例如:密码.通讯内容或信用卡信息).了解详情 NE ...

  10. 基础python规范

    一.注释     合理的代码注释应该占源代码的 1/3 左右,Python 语言允许在任何地方插入空字符或注释,但不能插入到标识符和字符串中间.     在 Python 中,通常包括 3 种类型的注 ...