[TOC] ## 阻止旋转屏幕时自动调整字体大小 ```css html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; } ``` ## 去掉手持设备点击时出现的透明层 ```css a,button,input{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } ``` ## transform变换z-index层级渲染异常 [层叠上下文](https://developer.mozilla.org/zh-CN/CSS/Understanding_z-index/The_stacking_context) 在一些浏览器或设备上，当 transform 和 z-index 在一起使用时会发生异样，造成z-index失灵。至于为什么会失灵，以及如何解决，这里就不多讲了。如果您对这方面的感兴趣，可以看看@张鑫旭大师写得一篇文章[《Safari 3D transform变换z-index层级渲染异常的研究》](http://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/)。 文章总结了两种解决方案： 1. 父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染 2. 以毒攻毒。也可以使用3D transform变换 ## 何时使用Transform来实现z-index 在介绍 z-index 和 translate3d一节中，我们也了解到了，有时候设置z-index来控制z轴并不有效，张大师文章也提到过，它们在一起使用时，有时候会使用z-index失灵。其实还有一个现象，大家可能平时并没有注意到。 当你通过z-index配合伪元素::before或者::after时让其z轴在元素的底部，特别是碰到大的元素渲染(比如全屏背景图)，会直接影响性能，特别是在移动端，会造成客户端闪退，也就是大家所说的Crash，给用户造成非常不好的体验。 缩合上面的几个现象(当然可能还有很多我自己没有发现的)，我们可以抛弃z-index来控制z轴的顺序，而是直接通过transform中的translateZ() 或者translate3d()来控制z轴的顺序。 >原文: [z-index和transform](http://www.w3cplus.com/css/3d-transform-and-z-index.html) © w3cplus.com