摘要：要求能够显示最后一个完整的标签。搜索解决方式时一直关注的是失效，而没有想过是因为使用了的影响。这个属性存在兼容性问题。在解决问题的过程中，发现了另一种解决办法，在父元素上添加。
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113867.html
摘要：要求能够显示最后一个完整的标签。搜索解决方式时一直关注的是失效，而没有想过是因为使用了的影响。这个属性存在兼容性问题。在解决问题的过程中，发现了另一种解决办法，在父元素上添加。 2018-08-03 Questions about work 这几天开发的时候遇到了个问题，如图1。 写了个demo demo 地址 由于页面并没有进行整体缩放，导致在小屏幕手机上显示会有异常。PM要求能够显...
摘要：要求能够显示最后一个完整的标签。搜索解决方式时一直关注的是失效，而没有想过是因为使用了的影响。这个属性存在兼容性问题。在解决问题的过程中，发现了另一种解决办法，在父元素上添加。 2018-08-03 Questions about work 这几天开发的时候遇到了个问题，如图1。 写了个demo demo 地址 由于页面并没有进行整体缩放，导致在小屏幕手机上显示会有异常。PM要求能够显...
摘要：写了个由于页面并没有进行整体缩放，导致在小屏幕手机上显示会有异常。要求能够显示最后一个完整的标签。搜索解决方式时一直关注的是失效，而没有想过是因为使用了的影响。在解决问题的过程中，发现了另一种解决办法，在父元素上添加。 原文地址 背景 这几天开发的时候遇到了个问题，如图1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要：写了个由于页面并没有进行整体缩放，导致在小屏幕手机上显示会有异常。要求能够显示最后一个完整的标签。搜索解决方式时一直关注的是失效，而没有想过是因为使用了的影响。在解决问题的过程中，发现了另一种解决办法，在父元素上添加。 原文地址 背景 这几天开发的时候遇到了个问题，如图1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要：在项目开发中，我们有时候需要实现元素从屏幕外移动到屏幕内的效果。问题但是如果你的页面是移动端页面的话，你会发现有时候会出现失效的问题。出现这样的问题一般是因为你的元素是相对于移动的，这样的情况在移动端就会出现问题。 在项目开发中，我们有时候需要实现元素从屏幕外移动到屏幕内的效果。 我们一般会有这样的方案：先通过position: absolution或transform: trans...
阅读 595·2021-09-09 09:33
阅读 3331·2019-08-30 12:58
阅读 808·2019-08-29 16:37
阅读 2647·2019-08-29 16:29
阅读 3017·2019-08-26 12:18
阅读 2263·2019-08-26 11:59
阅读 3262·2019-08-23 18:27
阅读 3150·2019-08-23 17:21
