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

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. 比特币区块的hash算法

    Block hashing algorithm Bitcoin mining uses the hashcash proof of work function; the hashcash algori ...

  2. Redux 视频教程

    视频地址:http://www.imooc.com/learn/744

  3. C#程序 界面显示运行信息

    1.使用RichTextBox,难免要在多线程调用,所以需要委托. Color定义此条信息用什么颜色显示.可以不同的颜色显示不同的信息. private void ShowMsg(Color colo ...

  4. Flutter Widget框架概述

    Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI. Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么.当w ...

  5. 剑指offer 65. 不用加减乘除做加法（Leetcode 371. Sum of Two Integers）

    剑指offer 65. 不用加减乘除做加法(Leetcode 371. Sum of Two Integers) https://leetcode.com/problems/sum-of-two-in ...

  6. Vulnhub-XXE靶机学习

    ------------恢复内容开始------------ 前两天在微信公众号上看见了这个XXE靶场,就想试一试,虽然网上关于这个的文章已经写了太多太多了,但还是要写出来划划水,233333333, ...

  7. Linux 18.04 搭建lamp环境

    Linux 18.04 下搭建lamp环境 一.      安装服务器 a)     在配置好sources.list文件后,apt-get updata&upgrade更新软件: 二.    ...

  8. vue中 :style 与 :class 三元运算符使用

    参考链接:https://www.jianshu.com/p/31664974303d

  9. zookeeper的shell下操作

    zookeeper的shell下操作 进入%ZK_HOME%/bin 执行zkCli.sh [-server ip:port] #如不指定,则连接本机   创建: create [-s] [-e] p ...

  10. noi openjudge 6044：鸣人和佐助

    http://noi.openjudge.cn/ch0205/6044/ 描述佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐助和鸣人的位置.地图上的每个 ...