移动端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 ...
随机推荐
- windows Server 2008 R2 开关机取消登录时要按Ctrl+Alt+Delete组合键登录的方法
1.点桌面任务栏的“开始-->运行”在弹出的窗口中输入gpedit.msc . 2.找到如下图所示的位置 右键属性进行设置如下
- request.getParameter(“xxx”)的参数的取值
request.getParameter(“xxx”)的参数的取值的几种可能: 1. Html中form表单中标签的name属性: <form name="form" met ...
- wcstombs_s 宽字节转多字节
// crt_wcstombs_s.c // This example converts a wide character // string to a multibyte character str ...
- java 查看线程的信息
的代码上加上 断点 运行 进入Terminal jps 查看进程号 jstack 进程号 查看线程的信息 jstack pid 此时进去DEBUG 端F9 跑完程序 再回到Terminal 中 就能 ...
- 关于Python ,requests的小技巧
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xie_0723/article/details/52790786 关于 Python Request ...
- [javase学习笔记]-6.2 类与对象的关系
这一节我们来看一下类与对象之间的关系. 我们学习java语言,目的就是用java语言对现实生活中的事物进行描写叙述.那么我们如何来描写叙述呢.这就引出了类,我们在实际实现时,是通过类的形式来体现的. ...
- Mac下必备快捷键的符号所对应的按键
Mac下快捷键的符号所对应的按键 ⌥—> option|alt ⇧—>shift ⌃—>control ⌘—>command ⎋—>esc 注: 与F6/F7/F12等F ...
- 看不见的攻击面:查看 SQLite 数据库就中招?
Navicat 客户端存在一个 XSS,在查看表字段时,没有对内容进行处理,导致一个 XSS 问题.利用这个漏洞可以读取敏感文件,比如 /Users/XXXX/.bash_history . 漏洞发现 ...
- HTML5手机页面里面如何把长按复制避免
在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的 但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...
- JPA+Hibernate 3.3 ——增删改查
1. 查找对象 1) 用find()方法查找对象 public void getPerson(){ EntityManagerFactory factory = Persistence. ...