原文地址

背景

这几天开发的时候遇到了个问题,如图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. java 线程池的创建方式

    package com.nf147.Constroller; import java.util.concurrent.ExecutorService; import java.util.concurr ...

  2. 北风设计模式课程---最少知识原则(Least Knowledge Principle)

    北风设计模式课程---最少知识原则(Least Knowledge Principle) 一.总结 一句话总结: 最少知识原则(Least Knowledge Principle),或者称迪米特法则( ...

  3. leetcode-mid-Linked list- 116. Populating Next Right Pointers in Each Node

    mycode   93.97% """ # Definition for a Node. class Node(object): def __init__(self, v ...

  4. 图论&线性基(?)(8.12)

    边没有负权,最短路最多只有n条边 很暴力的思想: 先跑一遍最短路,找出最短路上的边,枚举每条边,翻倍,放进原图再跑一遍.取最大值 好熟悉啊 分层建图,建k层 每层内部是原图 若原图中u到v有连边,则由 ...

  5. audit的日志

    audit审计, audio 声音, 音频 audit的日志, 有两个可能的地方: 一是, /var/log/messages 文件中 二是, 如果开启了audit服务, 则 在/var/log/au ...

  6. Vue实现音乐播放器(二)-Vue-cli脚手架安装

  7. 【LeetCode】 两数之和 twoSum

    两数之和 (简单) 题目描述 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数: 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 例如: 给定 nums = [2,7,11, ...

  8. 5分钟连续出现某现象+微信模板消息提醒 PHP

    需求场景:用电插座电流连续出现5次电流过高(大于 3A)后停止用电服务,前四次发送电流过高提醒,最后一次发送结束用电服务提醒 思路: Redis  key 设为:插座编号+user户编号  value ...

  9. idea的热部署

    1:先找到你要热部署的tomcat之后 ,在设置tomcat时  先选择 server,里面有On 'Update' action ()  和 On frame deactivation 这两项  都 ...

  10. 安全运维 - Windows系统攻击回溯

    Windows应急事件 病毒.木马.蠕虫 Web服务器入侵事件或第三方服务入侵事件 系统入侵事件 网络攻击事件(DDOS.ARP.DNS劫持等) 通用排查思路 获知异常事件基本情况 发现主机异常现象的 ...