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

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. Python操作memecache

    memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载,故常用来做数据库缓存.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态 ...

  2. EasyNetQ使用(一)【介绍】

    EasyNetQ 是一个容易使用,专门针对RabbitMQ的 .NET API. 假如你尽可能快的想去安装和运行RabbitMQ,请去看入门指南.EasyNetQ是为了提供一个尽可能简洁的适用与Rab ...

  3. 前端HTML介绍，标签介绍，基础选择器，CSS引入方法

    1. HTML 1.1 前端: 所有用户能看到的界面网页.pc端的应用exe.移动端应用app.微信小程序.手环的时间界面html5为基础的前端:网页.app.微信小程序 1.2 前端三剑客: 1.h ...

  4. RMQ问题--ST

    #include<iostream> #include<cstdio> #include<cmath> using namespace std; ; ]; int ...

  5. c++学习笔记_6

    前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 多态 虚 ...

  6. OpenGL.资料积累

    1.又一种Qt + OpenGL 的离屏渲染方法 - liji_digital的博客 - CSDN博客.html(https://blog.csdn.net/liji_digital/article/ ...

  7. 最新 美图java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美图等10家互联网公司的校招Offer,因为某些自身原因最终选择了美图.6.7月主要是做系统复习.项目复盘.LeetCode ...

  8. Qt中QGraphics类坐标映射关系详解

    1.Item(图元)坐标:属于局部坐标,通常以图元中心为原点(中心对称),非中心对称类,比如dialog类,一般以左上角为原点,正方向x朝右,y朝下. 2.setPos的坐标是父类坐标系的坐标,一般对 ...

  9. 课程设计之C/C++实现用户登录注册

    最近的一个课程设计要求的一个用户登录的程序,通常软件网页等的用户登录注册都是涉及到数据库.但像课程设计这种小程序要求的安全度不高就可以用c/c++实现. 首先,我们要清楚用户登录的流程.应该大家对这些 ...

  10. nssm设置solr开机启动服务

    首先,下载nssm http://www.nssm.cc/download 命令 nssm install solr 然后到服务里启动solr,并设置为自动 Ctrl+Shift+Esc(说明:Esc ...