2018-08-03关于工作的问题这几天在开发中遇到了一个问题，如图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可以解决问题）。原因可以看这篇文章overflow:hiddenfailure如果从这个角度来分析的话，因为我们的before伪元素使用absolute绝对定位，而外层没有定位，before元素没有成功隐藏，对应的tag元素，由于没有设置定位，所以正常隐藏。那为什么用了transform:translateZ(0)就可以解决问题呢？参考这篇文章transform对元素的影响Absolute绝对定位元素，如果存在overflow不可见的父元素，同时父元素和绝对定位元素之间的任何嵌套元素都不存在的位置是非静态属性语句，溢出对绝对元素没有影响。这是有关堆叠上下文的问题。您可以参考堆栈上下文。当使用transform:translateZ(0)时，会生成一个新层并覆盖在其上。部分手机使用transform后还是会出现以上问题，所以比较好的解决方法应该是设置position
