这第一次做手机端网页,在交付测试的时候发现一个问题,
就是body的宽度,我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的,但是在手机端测试的时候发现,overflow:hidden是失效的。就是说,页面是也可以左右摇晃的,延展出去的部分会被扯来扯去= =
后来查阅了一些资料,了解到这是由于移动端的web内核不同意导致的。

解决方案:
第一种:
body{position:fixed;width:100%;height:100%}
第二种:
给滚动的元素添加一个父级,设定高度,并且,overflow:auto;
第三种:
html,body{width:100%;overflow:hidden}

移动端html的overflow:hidden属性失效问题的更多相关文章

  1. overflow:hidden真的失效了吗

    项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知 ...

  2. [转]overflow:hidden真的失效了吗

    项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道 ...

  3. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  4. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  5. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  6. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  8. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  9. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

随机推荐

  1. pycharm如何设置python版本、设置国内pip镜像、添加第三方类库

    直接上图(mac环境): 一.设置项目的python版本 File->Default Settings ... 在弹出的界面上(参考下图),左上角的下拉框里,选择python解释器的版本即可(建 ...

  2. spring boot + embed tomcat + standalone jar的内存泄露问题

    前一阵遇到了一个很坑的内存泄露问题,记录于此: 有个项目采用spring cloud重构后,部署到线上(其中有一个接口,大概每天调用量在1千万次左右),发现zabbix监控里,linux的可用内存一直 ...

  3. .net core 3.0视图动态编译

    之前在使用Visual Studio 2019的时候,就发现asp.net 3.0中没有cshtml动态编译的功能了:也就是说,如果改了cshtml,刷新页面不会立即生效,而是要重新编译一次才行. 这 ...

  4. 模拟一个带背景的 TPanel

    https://www.cnblogs.com/del/archive/2008/09/01/1281345.html

  5. [Android Pro] AndroidX重构和映射

    原文地址:https://developer.android.com/topic/libraries/support-library/refactor https://blog.csdn.net/ch ...

  6. 学员会诊之02:SVN协作以及Page类的设计

    三层架构的学生管理系统是我们第一个稍微大型的项目:分层.一个解决方案多个Project,所以值得我们停下来好好审查审查. 1.测试SVN服务器地址 我们的作业要求学员创建自己的SVN服务器,并且将代码 ...

  7. 视觉SLAM中的数学基础 第三篇 李群与李代数

    视觉SLAM中的数学基础 第三篇 李群与李代数 前言 在SLAM中,除了表达3D旋转与位移之外,我们还要对它们进行估计,因为SLAM整个过程就是在不断地估计机器人的位姿与地图.为了做这件事,需要对变换 ...

  8. 管理 Oracle Cluster Registry(OCR)

    oracle的clusterware包含两个重要组件:OCR(包含本地组件OLR)和voting disks --OCR管理oracle clusterware和oracle rac数据库的配置信息 ...

  9. ubuntu 16 安装 openjdk 8

    apt--jdk -y 进行验证即可

  10. Atitit 数据库 标准库  sdk 函数库 编程语言 mysql oracle  attilax总结

    Atitit 数据库 标准库  sdk 函数库 编程语言 mysql oracle  attilax总结 1.1. 常见的编程语言以及数据库 sql内部函数库标准化库一般有以下api1 1.2. 各个 ...