瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設置各個標簽的內外補丁是0。
瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七：透明度的兼容CSS設置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什么會出現兼容問題以及怎么去解決這些兼容問題。
/* CSS hack*/
我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的代碼IE不兼容，然后用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6認識的hacker 是下劃線_ 和星號 *
◆IE7 遨游認識的hacker是星號 *
比如這樣一個CSS設置：
height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識heihgt， 所以當IE6讀到height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；
IE7和遨游也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且想沖突的屬性設置后一個會覆蓋掉前一個，所以書寫的次序是很重要的。
移動端常見問題及解決方案
一、meta基礎知識
H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
- 忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" /> - 當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對iOS的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> - 將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
二、常見問題
移動端如何定義字體font-family，中文字體使用系統默認即可，英文用Helvetica
移動端字體單位font-size選擇px還是rem。對于只需要適配手機設備，使用px即可，對于需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。
移動端touch事件(區分webkit 和 winphone)
當用戶手指放在移動設備的屏幕上滑動會觸發的touch事件
以下支持webkit：
1、touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
2、 touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動
3、touchend——當手指離開屏幕時觸發
4、touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
移動端click屏幕產生200-300 ms的延遲響應
移動設備上的web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。
解決方案
fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問題
觸摸事件的響應順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應。
在高清顯示屏中的位圖被放大，圖片會變得模糊？
移動端的視覺稿通常會設計為傳統PC的2倍。
前端的應對方案是：設計稿切出來的圖片長寬保證為偶數，并使用backgroud-size把圖片縮小為原來的1/2；
例如圖片寬高為：200px*200px，那么寫法如下：.css{width:100px;height:100px;background-size:100px 100px;}其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px：.css{font-size:20px}
ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉？
ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設置為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系統中元素被點擊時產生的邊框怎么去掉？
android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
另外，有些機型去除不了，如小米2
對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽
參考《如何去除android上a標簽產生的邊框》
1、winphone系統a、input標簽被點擊時產生的半透明灰色背景怎么去掉？
<meta name="msapplication-tap-highlight" content="no">
2、webkit表單元素的默認外觀怎么重置？
.css{-webkit-appearance:none;}
3、webkit表單輸入框placeholder的顏色值能改變么？
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
4、webkit表單輸入框placeholder的文字能換行么？
ios可以，android不行~
IE10（winphone8）表單元素默認外觀如何重置？
1、禁用 select 默認下拉箭頭
::-ms-expand 適用于表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand {display: none;}
2、禁用 radio 和 checkbox 默認樣式
::-ms-check 適用于表單復選框或單選按鈕默認圖標的修改，同樣有多個屬性值，設置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
3、禁用PC端表單輸入框默認清除按鈕
當表單文本輸入框輸入內容后會顯示文本清除按鈕，::-ms-clear 適用于該清除按鈕的修改，同樣設置使它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
4、禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
5、禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
參考《如何改變表單元素的外觀(for Webkit and IE10)》
打電話發短信的怎么實現？
1、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
2、發短信
winphone系統無效
<a href="sms:10086">發短信給: 10086</a>
模擬按鈕hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中并沒有鼠標指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下：
<div class="btn-blue">按鈕</div>
<script type="text/JavaScript">
document.addEventListener("touchstart", function(){}, true)
</script>
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
varbtnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>
屏幕旋轉的事件和樣式
1、事件
window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
2、樣式
/豎屏時使用的樣式/
@media all and (orientation:portrait) { .css{} }
/橫屏時使用的樣式/
@media all and (orientation:landscape) {
.css{}
}
audio元素和video元素在ios和andriod中無法自動播放
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
可參考《無法自動播放的audio元素》
搖一搖功能
HTML5 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。
手機拍照和上傳圖片
<input type="file">的accept 屬性
<input type=file accept="image/">
<input type=file accept="video/">
使用總結：ios 有拍照、錄像、選取本地圖片功能，部分android只有選取本地圖片功能，winphone不支持
微信瀏覽器用戶調整字體大小后頁面矬了，怎么阻止用戶調整？
原因
Anroid則是復寫了layoutinflater 對textview做了統一處理
Ios則是修改了body.style.webkitTextSizeAdjust值
普通解決方案：android暫無方案
ios使用-webkit-text-size-adjust禁止調整字體大小
body{-webkit-text-size-adjust: 100%!important;}
最好的解決方案：整個頁面用rem或者百分比布局
消除transition閃屏
.css{
/設置內嵌的元素在 3D 空間如何呈現：保留 3D/
-webkit-transform-style: preserve-3d;
/（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）/
-webkit-backface-visibility: hidden;
}
開啟硬件加速，解決頁面閃白，保證動畫流暢
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
參考《用CSS開啟硬件加速來提高網站性能》
取消input在ios下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
android 2.3 bug
@-webkit-keyframes 需要以0%開始100%結束，0%的百分號不能去掉
after和before偽類無法使用動畫
border-radius不支持%單位
translate百分比的寫法和scale在一起會導致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時設置border-radius和背景色的時候，背景色會溢出到圓角以外部分
部分手機(如三星)，a鏈接支持鼠標:visited事件，也就是說鏈接訪問后文字變為紫色
參考《border-radius 移動之傷》
設計高性能CSS3動畫的幾個要素
盡可能地使用合成屬性transform和opacity來設計css3動畫，不使用position的left和top來定位
利用translate3D開啟GPU加速
參考《High Performance Animations》
fixed bug
ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案：可用isroll.js，暫無完美方案
參考
《移動端web頁面使用position:fixed問題總結》
《使用iScroll.js解決ios4下不支持position:fixed的問題》
如何阻止windows Phone的默認觸摸事件
winphone下默認觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */
參考：《Windows phone 8 touch support》
