overflow:hidden失效问题
2018-08-03 Questions about work
这几天开发的时候遇到了个问题,如图1。
写了个demo demo 地址
由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常。PM要求能够显示最后一个完整的标签。
当在iPhone5手机上查看页面的时候,由于设置了height
以及overflow:hidden
后面的标签被隐藏了。但是边框是用before伪元素实现的,并没有因为overflow:hidden
而一起隐藏(后面再探讨这种边框的不同实现方式)。
搜索解决方式时一直关注的是overflow:hidden
失效,而没有想过是因为使用了transform
的影响。
网上搜到了一种解决方式:
在父元素上添加:transform-style:preserve-3d
试了下,果然好了,然而。。。换个手机,换个浏览器就不行了。这个属性存在兼容性问题。
那既然跟transform
有关,试一下transform:translateZ(0)
,发现问题解决了,试了多个手机和浏览器,没有兼容性的问题。
在解决问题的过程中,发现了另一种解决办法,在父元素上添加position:relative
。这也就是说,是因为overflow:hidden
失效了导致了这样的问题,而与是否使用了transform
没有直接的关系(我把transform
去掉,仍然有图1的问题,只能说使用transform
可以解决问题)。
原因可以看这个文章 overflow:hidden失效
从这个角度进行分析的话,因为我们的before
伪元素使用了absolute
绝对定位,且外层没有定位,导致了这个before
元素没有成功被隐藏,而相应的tag元素,由于没有设置定位,所以正常隐藏了。
那为什么使用了transform:translateZ(0)
之后,问题也能够解决呢?
参考这个文章 transform对元素的影响
absolute绝对定位元素,如果含有overflow不为visible的父级元素,同时,该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明,则overflow对该absolute元素不起作用。
这里涉及到层叠上下文的问题 可以参考 层叠上下文
当使用transform:translateZ(0)
时,生成了新的层,覆盖在了上面。
补充
有的手机使用了transform之后仍然会出现上述问题,所以,更好的解决方式应该是设置position
overflow:hidden失效问题的更多相关文章
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
- IE6 Bug overflow:hidden失效
下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...
- overflow:hidden失效
overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...
- 在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、7下overflow:hidden失效的问题
问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...
- border-radius元素overflow:hidden失效问题
父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素
同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...
随机推荐
- 树状数组的理解(前缀和 and 差分)
二更—— 有神仙反映数星星那个题外链炸了,我决定把图给你们粘一下,汉语翻译的话在一本通提高篇的树状数组那一章里有,同时也修改了一些汉语语法的错误 这段时间学了线段树组,当神仙们都在学kmp和hash的 ...
- Spring 缓存注解解析过程
Spring 缓存注解解析过程 通过 SpringCacheAnnotationParser 的 parseCacheAnnotations 方法解析指定方法或类上的缓存注解, @Cacheable ...
- 测试-修补程序-Hotfix:百科
ylbtech-测试-修补程序-Hotfix:百科 1.返回顶部 1. Hotfix是微软公司研发的一个程序,针对某一个具体的系统漏洞或安全问题而发布的专门解决该漏洞或安全问题,通常称为修补程序. ...
- LeetCode All in One 题目讲解汇总(转...)
终于将LeetCode的免费题刷完了,真是漫长的第一遍啊,估计很多题都忘的差不多了,这次开个题目汇总贴,并附上每道题目的解题连接,方便之后查阅吧~ 如果各位看官们,大神们发现了任何错误,或是代码无法通 ...
- Spring 初识
一.Spring是什么? 首先可以进入Spring官网 https://spring.io/ 看一下相关介绍. Spring为开发者提供了一站式的轻量级应用开发平台.简单来说,Spring为开发者提供 ...
- Unity3D-Canvas-UIScaleMode
UnityCanvasUI自适应部分 用Canvas下的自适应UI Scale Mode: Constant Pixel Size:固定像素大小,无论如何UI怎么样就怎么样,只能通过 Scale Fa ...
- Service层获取HttpServletRequest request
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/liuyunshengsir/article/details/78183058HttpServletR ...
- struts2 2.5.16 通配符方式调用action中的方法报404
1.问题描述 在struts.xml中配置用通配符方式调用action中的add()方法,访问 http://localhost:8080/Struts2Demo/helloworld_add.act ...
- Linux常用命令梳理——文件管理(一)
由于本人目前仍是萌新一枚,所以<Linux常用命令梳理>系列仅依照个人目前掌握的知识,对一部分命令进行梳理,目的是为了对之前学到的知识进行巩固.当然了,如果机缘巧合被大家看到了,也欢迎各位 ...
- appium输入和清除操作各方法对比(android)
最近在写android app自动化测试时,发现输入和清除操作耗费时间比较长,下面我用了不同的方法进行输入和清除操作,对比下时间(选取测试的一组数据做分析),选出最佳方法. 1.输入操作 1.1.we ...