移动端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 ...
随机推荐
- ArcGIS Pro 获得工具的个数
import arcgisscripting import string; gp = arcgisscripting.create(9.3); ##多少个工具箱 toolboxes = gp.list ...
- 6、Python变量
Python变量 变量的定义 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变. 变量的命名 变量名有字母.数字.下划线组成. 数字不能开头 不可以使用关键字 a a1 a_ ...
- [leetcode]Decode Ways @ Python
原题地址:https://oj.leetcode.com/problems/decode-ways/ 题意: A message containing letters from A-Z is bein ...
- ThreadLocal 简介 案例 源码分析 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 修改覆盖springboot默认日志策略logback
目录 背景 自定义 背景 springboot初始化了日志的默认实现,只要我们在配置文件添加对应的配置即可. 比如 logging: file: logs/application-debug.log ...
- scala recursive value x$5 needs type
recursive value x$5 needs type的原因是使用了一个类型不确定的变量,例如 val (id, name) = (id, getName(id)) 其中id是个变量,其值还不确 ...
- C#中使用log4net框架做日志输出
一.用法 1.引入包:https://www.nuget.org/packages/log4net/ 2.Main函数 using System; using System.IO; using log ...
- 基于Centos7.5搭建Docker环境
docker很火,基于容器化技术,实现一次编译到运行.实现运行环境+服务的一键式打包! 00.部署环境 centos7.5(基于vmware搭建的测试环境,可以跟互联网交互,桥接方式联网) docke ...
- 【C#】详解C#序列化
目录结构: contents structure [+] 简介 控制序列化和反序列化 特性(OnSerializing.OnSerialized.OnDeserializing.OnDeseriali ...
- synchronized和lock比较
一.synchronized的实现方案 1.synchronized能够把任何一个非null对象当成锁,实现由两种方式: a.当synchronized作用于非静态方法时,锁住的是当前对象的事例,当s ...