原文地址

背景

这几天开发的时候遇到了个问题,如图1。

写了个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并无必然联系,只能说使用transform可以解决问题)。

原因可以看这个文章 overflow:hidden失效

从这个角度进行分析的话,因为我们的before伪元素使用了absolute绝对定位,且外层没有定位,导致了这个before元素没有成功被隐藏,而相应的tag元素,由于没有设置定位,所以正常隐藏了。

那为什么使用了transform:translateZ(0)之后,问题也能够解决呢?

参考这个文章 transform对元素的影响

absolute绝对定位元素,如果含有overflow不为visible的父级元素,同时,该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明,则overflow对该absolute元素不起作用。

这里涉及到层叠上下文的问题 可以参考 层叠上下文

当使用transform:translateZ(0)时,生成了新的层,覆盖在了上面。

overflow hidden 遇上absolute失效的更多相关文章

  1. 解决overflow: hidden在移动端失效问题

    1.问题:移动端出现弹窗后,滑动页面,页面底部出现空白 二.原因 经过分析,发现overflow: hidden;在移动端失效,导致弹窗出现时,滑动页面,页面底部出现空白. 三.解决 参考网址:htt ...

  2. overflow:hidden与position:absolute

    在做一个下拉框的动画效果中遇到了这个bug,记录一下. 在写下拉框的动画的时候,一般我们的做法都是把下拉框的外盒子设为overflow:hidden,然后设下外层盒子高度,之后通过js慢慢的改变高度从 ...

  3. IE6、7下overflow:hidden失效的问题

    问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...

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

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

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

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

  6. IE6 Bug overflow:hidden失效

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

  7. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  8. css中:overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  9. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

随机推荐

  1. Linux中退出循环命令

    [root@a ~]#cat break.sh #!/bin/bash while : #其中“:”表示while循环的条件永远为真的意思 do read -p "Enter a numbe ...

  2. principal components analysis 主成份分析

    w http://deeplearning.stanford.edu/wiki/index.php/主成份分析 主成分分析(PCA)及其在R里的实现 - jicf的日志 - 网易博客  http:// ...

  3. 在window 10查看一下指定命令行工具所在的位置

    很久之前安装过node,现在想要给node升级,通过where命令查看一下node的安装位置

  4. CSS - 层叠上下文(The stacking context)

    对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: ...

  5. 启动tomcat报错One or more listeners failed to start,却找不到任何错误日志的临时解决方案

    在整合spring和quartz时,启动tomcat,服务台报以上错误,却找不到任何错误日志…… 参考了https://www.cnblogs.com/sxdcgaq8080/p/8005886.ht ...

  6. VMware 虚拟化编程(10) — VMware 数据块修改跟踪技术 CBT

    目录 目录 前文列表 数据块修改跟踪技术 CBT 为虚拟机开启 CBT CBT 修改数据块偏移量获取函数 QueryChangedDiskAreas changeId 一个 QueryChangedD ...

  7. 阶段1 语言基础+高级_1-2 -面向对象和封装_15练习使用private关键字定义

    练习使用private关键字定义一个学生类.通过这个联系说明一种特殊情况 先定义了name个age分别再定义getter和setter的方法 boolean类型的getter方法不能叫做get开头的. ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第7节 内部类_7_内部类的概念与分类

    完整

  9. python正则表达式整理

    正则表达式在处理字符串时很大的作用,爬虫中也经常用到,下面就将一些常用正则表达式做一整理记录,方便以后查看. ^d   表示匹配以d开头的字符串 .      表示匹配任意字符串 *     表示前面 ...

  10. 【ABAP系列】SAP ABAP同时显示多个ALV的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP同时显示多个AL ...