細數工作三個月來踩過的坑。。。
在做移動端頁面時，遇到讓兩個元素（比如簡單到兩個單詞）平分頁面的寬度的情況， 不要使用給他們加a ,span 標簽，然后讓a,span寬度50%的方法。這種方法做不到完全居中。
solution:利用div+float
當一個浮動元素（沒有聲明寬度）包含一個向右浮動的子元素時，它同樣也會自動的延伸填充，以適應父元素的可用內容的寬度。
solution:盡量為一個浮動元素指定一個具體的寬度值，
H5頁面對一些元素進行旋轉、變形鋸齒修復
solution: -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)
熟悉各瀏覽器的內核可以避免做完頁面所有瀏覽器都測試一遍的麻煩
Trident內核的常見瀏覽器有：[1] IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全瀏覽器（1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink）獵豹極輕瀏覽器，360極速瀏覽器（7.5之前為Trident+Webkit，7.5為Trident+Blink）獵豹安全瀏覽器（1.0-4.2版本為Trident+Webkit，4.3及以后版本為Trident+Blink）獵豹極輕瀏覽器，傲游瀏覽器（傲游1.x、2.x為IE內核，3.x為IE與Webkit雙核）、百度瀏覽器（早期版本）、世界之窗瀏覽器[2] （最初為IE內核，2013年采用Chrome+IE內核）、2345瀏覽器、騰訊TT、淘寶瀏覽器、采編讀瀏覽器、搜狗高速瀏覽器（1.x為Trident，2.0及以后版本為Trident+Webkit）、阿雲瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser、 GreenBrowser、愛帆瀏覽器（12 之前版本）、115瀏覽器、155瀏覽器、閃游瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達瀏覽器、佐羅瀏覽器、海豚瀏覽器（iPhone/iPad/Android）、UC瀏覽器（Blink內核+Trident內核）等。 其中部分瀏覽器的新版本是“雙核”甚至是“多核”，其中一個內核是Trident，然后再增加一個其他內核。國內的廠商一般把其他內核叫做“高速瀏覽模式”，而Trident則是“兼容瀏覽模式”，用戶可以來回切換。 Gecko(Firefox內核)：Netscape6開始采用的內核，后來的Mozilla FireFox(火狐瀏覽器) 也采用了該內核，Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源內核，因此受到許多人的青睞，Gecko內核的瀏覽器也很多，這也是Gecko內核雖然年輕但市場占有率能夠迅速提高的重要原因。 Opera現已改用Google Chrome的Blink內核。 WebKit內核常見的瀏覽器：傲游瀏覽器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器， Blink 谷歌 基於KHTML內核的內核：WebKit、WebCore。
移動端頁面a標簽在觸發點擊時或則設置了偽類：active的元素，在激活狀態時會出現高亮，但有時候並不需要
solution:設置樣式：-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
垂直居中
| 1 | 利用lineheight; |
| 2 | 將父級div的設置為display:table,將子div設置為display:table-cell。然后就可以使用table特有的vertical-align:middle屬性了。 |
| 3 | 利用負邊距,先設置position：absolute然后設置top:50%接着設置margin-top:-(height/2) |
| 4 | 首先設置display:box,然后box-align:center為兼容各瀏覽器請加相應前綴 |
水平居中
| 1 | 塊級元素可以使用margin:0 auto; |
| 2 | 行內元素想button之類的可以使用text-align:center; |
| 3 | 使用負邊距，原理同垂直居中 |
| 4 | 利用flexible-box，原理同垂直居中，設置box-pack:center |
| * | 伸縮盒模型在移動端使用的較多，瀏覽器還有一些兼容性問題，不過網格布局在移動端和PC端使用都沒有什么問題 |
給a加背景圖片之前要先加高度並且display:block;
避免鏈接點擊時隨意跳轉
在a標簽內加入href="javascript:0"