[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