移动端html的overflow:hidden属性失效问题
这第一次做手机端网页,在交付测试的时候发现一个问题,
就是body的宽度,我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的,但是在手机端测试的时候发现,overflow:hidden是失效的。就是说,页面是也可以左右摇晃的,延展出去的部分会被扯来扯去= =
后来查阅了一些资料,了解到这是由于移动端的web内核不同意导致的。
解决方案:
第一种:
body{position:fixed;width:100%;height:100%}
第二种:
给滚动的元素添加一个父级,设定高度,并且,overflow:auto;
第三种:
html,body{width:100%;overflow:hidden}
移动端html的overflow:hidden属性失效问题的更多相关文章
- overflow:hidden真的失效了吗
项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知 ...
- [转]overflow:hidden真的失效了吗
项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
- CSS 的overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 ove ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- IE6 Bug overflow:hidden失效
下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...
随机推荐
- pycharm如何设置python版本、设置国内pip镜像、添加第三方类库
直接上图(mac环境): 一.设置项目的python版本 File->Default Settings ... 在弹出的界面上(参考下图),左上角的下拉框里,选择python解释器的版本即可(建 ...
- spring boot + embed tomcat + standalone jar的内存泄露问题
前一阵遇到了一个很坑的内存泄露问题,记录于此: 有个项目采用spring cloud重构后,部署到线上(其中有一个接口,大概每天调用量在1千万次左右),发现zabbix监控里,linux的可用内存一直 ...
- .net core 3.0视图动态编译
之前在使用Visual Studio 2019的时候,就发现asp.net 3.0中没有cshtml动态编译的功能了:也就是说,如果改了cshtml,刷新页面不会立即生效,而是要重新编译一次才行. 这 ...
- 模拟一个带背景的 TPanel
https://www.cnblogs.com/del/archive/2008/09/01/1281345.html
- [Android Pro] AndroidX重构和映射
原文地址:https://developer.android.com/topic/libraries/support-library/refactor https://blog.csdn.net/ch ...
- 学员会诊之02:SVN协作以及Page类的设计
三层架构的学生管理系统是我们第一个稍微大型的项目:分层.一个解决方案多个Project,所以值得我们停下来好好审查审查. 1.测试SVN服务器地址 我们的作业要求学员创建自己的SVN服务器,并且将代码 ...
- 视觉SLAM中的数学基础 第三篇 李群与李代数
视觉SLAM中的数学基础 第三篇 李群与李代数 前言 在SLAM中,除了表达3D旋转与位移之外,我们还要对它们进行估计,因为SLAM整个过程就是在不断地估计机器人的位姿与地图.为了做这件事,需要对变换 ...
- 管理 Oracle Cluster Registry(OCR)
oracle的clusterware包含两个重要组件:OCR(包含本地组件OLR)和voting disks --OCR管理oracle clusterware和oracle rac数据库的配置信息 ...
- ubuntu 16 安装 openjdk 8
apt--jdk -y 进行验证即可
- Atitit 数据库 标准库 sdk 函数库 编程语言 mysql oracle attilax总结
Atitit 数据库 标准库 sdk 函数库 编程语言 mysql oracle attilax总结 1.1. 常见的编程语言以及数据库 sql内部函数库标准化库一般有以下api1 1.2. 各个 ...