原文地址后台这几天在开发中遇到了一个问题，如图1，写了一个demo。由于页面没有整体缩放，在小屏手机上显示会出现异常。PM需要能够显示最后一个完整的标签。在iPhone5手机上查看页面时，隐藏了height和overflow:hidden后面的标签。但是border是用before伪元素实现的，并没有因为overflow:hidden而一起隐藏（后面会讨论这个border的不同实现）。在寻找解决方案的时候，一直在关注overflow:hidden的失败，但是因为transform的影响一直没有去想。解决方法在网上找到了解决方法：在父元素上添加：transform-style:preserve-3d。我试过了，但它奏效了。..换手机，换浏览器都不行。此属性存在兼容性问题。既然和transform有关，试试transform:translateZ(0)，发现问题解决了。试了多款手机和浏览器，都没有兼容性问题。在解决问题的过程中，我找到了另一种解决方案，添加position：相对于父元素。也就是说overflow:hidden失败导致了这样的问题，和是否使用transform没有直接关系（我去掉了transform，但是图1的问题依然存在，所以跟transform没有必然关系，只能说使用transform才能解决问题）。原因可以看这篇文章overflow:hiddenfailure如果从这个角度来分析的话，因为我们的before伪元素使用absolute绝对定位，而外层没有定位，before元素没有成功隐藏，对应的tag元素，由于没有设置定位，所以正常隐藏。那为什么用了transform:translateZ(0)就可以解决问题呢？参考这篇文章transform对元素的影响Absolute绝对定位元素，如果存在overflow不可见的父元素，同时父元素和绝对定位元素之间的任何嵌套元素都不存在的位置是非静态属性语句，溢出对绝对元素没有影响。这是有关堆叠上下文的问题。您可以参考堆栈上下文。当使用transform:translateZ(0)时，会生成一个新层并覆盖在其上。
