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

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. linux安装IDEA 2017

    下载 IDEA 2017 链接:http://pan.baidu.com/s/1skTKdFR 密码:yug3 解压 下载的文件    tar zxvf idea-IU-172.4155.36.tar ...

  2. java nio 缓冲区读写数据(图形详解)

    Position 您可以回想一下,缓冲区实际上就是美化了的数组.在从通道读取时,您将所读取的数据放到底层的数组中. position 变量跟踪已经写了多少数据.更准确地说,它指定了下一个字节将放到数组 ...

  3. Java 实现 telnet命令 验证主机端口的连通性

    Java 实现 telnet命令 验证主机端口的连通性 1.Telnet 命令 Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它为用户提供了在本地计 ...

  4. BTE增强

    转自https://www.cnblogs.com/Garfield/p/5313962.html Enhancement(1)--BTEs 最近一个同事碰到一个FI的增强,要用BTEs实现,我也是第 ...

  5. 从库因为sql错误导致主从同步被中断的问题解决

    从库因为sql错误导致主从同步被中断的问题解决:show slave status\G;看lasterror:看延迟多少秒,正常情况下是没有延迟的. 跳过错误的那条sql:SET GLOBAL SQL ...

  6. IEEE754二进制浮点数算术标准

    对于32位浮点数 sign: 符号,1位 exponent: 指数,8位,偏码 fraction: 分数,23位,原码 特殊值   指数域的编码值 = 指数的实际值 + 127 这样按照字典序的顺序就 ...

  7. Windows核心编程随笔

    最近在学习Windows底层原理,准备写个系列文章分享给大家,Michael Li(微软实习期间的Mentor,为人超好)在知乎回答过一些关于学习Windows原理的书籍推荐,大家可以拜读其中一本来入 ...

  8. Android开发环境搭建(eclipse版)

    1.下载安装JDK 网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

  9. 【VS开发】获取CPU tick tick 周期

    多核处理器时,__rdtsc()的使用-编程珠玑第一章 根据书中提供的代码清单1-5,可以完成对于多核处理器的cpu占用率的控制. 但是在使用GetCPUTickCount计时时,下面的算式会出现一点 ...

  10. pandas越来越难学,只能自己找趣味了,你该这么学,No.11

    啊,大海啊,全是水 pandas啊,全是坑 没错,今天继续学习难的 其实从这篇开始,每一篇都是难得...... 你必须要努力看了 文末有彩蛋 分层/多级索引 我们先创建一个分层索引,看看效果 这个创建 ...