瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下涯呻，各自的margin 和padding差異較大深胳。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0眉睹。
瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下废膘，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br>
碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會碰到竹海，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽丐黄，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的斋配，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會碰到的兼容性問題。
瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px）艰争，在IE6坏瞄，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6甩卓、7和遨游里這個(gè)標(biāo)簽的高度不受控制鸠匀，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里逾柿。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度缀棍。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高机错。
瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽睦柴，設(shè)置display:block后采用float布局，又有橫行的margin的情況毡熏，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高侣诵，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)痢法。在用float布局并有橫向的margin后，在IE6下杜顺，他就具有了塊屬性float后的橫向margin的bug财搁。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們再加上display:inline的話躬络，它的高寬就不可設(shè)了尖奔。這時(shí)候我們還需要在display:inline后面加入display:talbe。
瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候穷当，有些瀏覽器會有默認(rèn)的間距提茁，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽馁菜，所以只要不超出容器寬度茴扁，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個(gè)間距汪疮。去掉這個(gè)間距使用float是正道峭火。
瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px智嚷，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時(shí)卖丸，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)盏道。容器的高度為300px稍浆；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動條粹湃。這時(shí)候我們就會面臨這個(gè)兼容性問題恐仑。
瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了为鳄。建議經(jīng)常會碰到兼容性問題的新手使用裳仆。很多兼容性問題都是因?yàn)闉g覽器對標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題孤钦。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話歧斟，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題。
/* CSS hack*/
我很少使用hacker的偏形，可能是個(gè)人習(xí)慣吧静袖，我不喜歡寫的代碼IE不兼容，然后用hack來解決俊扭。不過hacker還是非常好用的队橙。使用hacker我可以把瀏覽器分為3類：IE6 ；IE7和遨游萨惑；其他（IE8 chrome ff safari opera等）
◆IE6認(rèn)識的hacker 是下劃線_ 和星號 *
◆IE7 遨游認(rèn)識的hacker是星號 *
比如這樣一個(gè)CSS設(shè)置：
height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時(shí)候會認(rèn)為高時(shí)300px捐康；繼續(xù)往下讀，他也認(rèn)識heihgt庸蔼， 所以當(dāng)IE6讀到height:200px的時(shí)候會覆蓋掉前一條的相沖突設(shè)置解总，認(rèn)為高度是200px。繼續(xù)往下讀姐仅，IE6還認(rèn)識_height,所以他又會覆蓋掉200px高的設(shè)置花枫，把高度設(shè)置為100px；
IE7和遨游也是一樣的從高度300px的設(shè)置往下讀掏膏。當(dāng)它們讀到*height200px的時(shí)候就停下了劳翰，因?yàn)樗鼈儾徽J(rèn)識_height。所以它們會把高度解析為200px壤追，剩下的瀏覽器只認(rèn)識第一個(gè)height:300px;所以他們會把高度解析為300px磕道。因?yàn)閮?yōu)先級相同且想沖突的屬性設(shè)置后一個(gè)會覆蓋掉前一個(gè)，所以書寫的次序是很重要的行冰。
移動端常見問題及解決方案
一溺蕉、meta基礎(chǔ)知識
H5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略將頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
- 忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="email=no" /> - 當(dāng)網(wǎng)站添加到主屏幕快速啟動方式悼做，可隱藏地址欄疯特，僅針對iOS的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> - 將網(wǎng)站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
二肛走、常見問題
移動端如何定義字體font-family漓雅，中文字體使用系統(tǒng)默認(rèn)即可，英文用Helvetica
移動端字體單位font-size選擇px還是rem。對于只需要適配手機(jī)設(shè)備邻吞，使用px即可组题，對于需要適配各種移動設(shè)備，使用rem抱冷，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備崔列。
移動端touch事件(區(qū)分webkit 和 winphone)
當(dāng)用戶手指放在移動設(shè)備的屏幕上滑動會觸發(fā)的touch事件
以下支持webkit：
1、touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生旺遮。不管當(dāng)前有多少只手指
2赵讯、 touchmove——當(dāng)手指在屏幕上滑動時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面耿眉，會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動
3边翼、touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)
4、touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會觸發(fā)鸣剪。例如在觸摸過程中突然頁面alert()一個(gè)提示框组底，此時(shí)會觸發(fā)該事件，這個(gè)事件比較少用
移動端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)
移動設(shè)備上的web網(wǎng)頁是有300ms延遲的筐骇，往往會造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效斤寇。
解決方案
fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問題
觸摸事件的響應(yīng)順序
1拥褂、ontouchstart
2、ontouchmove
3牙寞、ontouchend
4饺鹃、onclick
解決300ms延遲的問題，也可以通過綁定ontouchstart事件间雀，加快對事件的響應(yīng)悔详。
在高清顯示屏中的位圖被放大，圖片會變得模糊惹挟？
移動端的視覺稿通常會設(shè)計(jì)為傳統(tǒng)PC的2倍茄螃。
前端的應(yīng)對方案是：設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2连锯；
例如圖片寬高為：200px*200px归苍，那么寫法如下：.css{width:100px;height:100px;background-size:100px 100px;}其它元素的取值為原來的1/2，例如視覺稿40px的字體运怖，使用樣式的寫法為20px：.css{font-size:20px}
ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉拼弃？
ios用戶點(diǎn)擊一個(gè)鏈接，會出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用摇展，可設(shè)置-webkit-tap-highlight-color的alpha值為0吻氧，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉？
android用戶點(diǎn)擊一個(gè)鏈接，會出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣盯孙，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個(gè)副作用鲁森，就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了振惰，如小米2
對于按鈕類還有個(gè)辦法歌溉，不使用a或者input標(biāo)簽，直接用div標(biāo)簽
參考《如何去除android上a標(biāo)簽產(chǎn)生的邊框》
1报账、winphone系統(tǒng)a研底、input標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景怎么去掉？
<meta name="msapplication-tap-highlight" content="no">
2透罢、webkit表單元素的默認(rèn)外觀怎么重置榜晦？
.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）表單元素默認(rèn)外觀如何重置识窿？
1、禁用 select 默認(rèn)下拉箭頭
::-ms-expand 適用于表單選擇控件下拉箭頭的修改脑融，有多個(gè)屬性值喻频，設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand {display: none;}
2、禁用 radio 和 checkbox 默認(rèn)樣式
::-ms-check 適用于表單復(fù)選框或單選按鈕默認(rèn)圖標(biāo)的修改，同樣有多個(gè)屬性值弦牡，設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果棚唆。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
3、禁用PC端表單輸入框默認(rèn)清除按鈕
當(dāng)表單文本輸入框輸入內(nèi)容后會顯示文本清除按鈕，::-ms-clear 適用于該清除按鈕的修改，同樣設(shè)置使它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
4狰挡、禁止ios 長按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止ios&android長按時(shí)下載圖片
.css{-webkit-touch-callout: none}
5释涛、禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
參考《如何改變表單元素的外觀(for Webkit and IE10)》
打電話發(fā)短信的怎么實(shí)現(xiàn)加叁？
1、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
2唇撬、發(fā)短信
winphone系統(tǒng)無效
<a href="sms:10086">發(fā)短信給: 10086</a>
模擬按鈕hover效果
移動端觸摸按鈕的效果殉农，可明示用戶有些事情正要發(fā)生，是一個(gè)比較好體驗(yàn)局荚，但是移動設(shè)備中并沒有鼠標(biāo)指針超凳，使用css的hover并不能滿足我們的需求愈污，還好國外有個(gè)激活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>
屏幕旋轉(zhuǎn)的事件和樣式
1创夜、事件
window.orientation杭跪，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式驰吓；
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
2涧尿、樣式
/豎屏?xí)r使用的樣式/
@media all and (orientation:portrait) { .css{} }
/橫屏?xí)r使用的樣式/
@media all and (orientation:landscape) {
.css{}
}
audio元素和video元素在ios和andriod中無法自動播放
應(yīng)對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
可參考《無法自動播放的audio元素》
搖一搖功能
HTML5 deviceMotion：封裝了運(yùn)動傳感器數(shù)據(jù)的事件，可以獲取手機(jī)運(yùn)動狀態(tài)下的運(yùn)動加速度等數(shù)據(jù)檬贰。
手機(jī)拍照和上傳圖片
<input type="file">的accept 屬性
<input type=file accept="image/">
<input type=file accept="video/">
使用總結(jié)：ios 有拍照姑廉、錄像、選取本地圖片功能翁涤，部分android只有選取本地圖片功能桥言，winphone不支持
微信瀏覽器用戶調(diào)整字體大小后頁面矬了，怎么阻止用戶調(diào)整葵礼？
原因
Anroid則是復(fù)寫了layoutinflater 對textview做了統(tǒng)一處理
Ios則是修改了body.style.webkitTextSizeAdjust值
普通解決方案：android暫無方案
ios使用-webkit-text-size-adjust禁止調(diào)整字體大小
body{-webkit-text-size-adjust: 100%!important;}
最好的解決方案：整個(gè)頁面用rem或者百分比布局
消除transition閃屏
.css{
/設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D/
-webkit-transform-style: preserve-3d;
/（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏）/
-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開啟硬件加速來提高網(wǎng)站性能》
取消input在ios下鸳粉，輸入的時(shí)候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" />
android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
android 2.3 bug
@-webkit-keyframes 需要以0%開始100%結(jié)束扔涧，0%的百分號不能去掉
after和before偽類無法使用動畫
border-radius不支持%單位
translate百分比的寫法和scale在一起會導(dǎo)致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時(shí)設(shè)置border-radius和背景色的時(shí)候届谈，背景色會溢出到圓角以外部分
部分手機(jī)(如三星)扰柠，a鏈接支持鼠標(biāo):visited事件，也就是說鏈接訪問后文字變?yōu)樽仙?/p>
參考《border-radius 移動之傷》
設(shè)計(jì)高性能CSS3動畫的幾個(gè)要素
盡可能地使用合成屬性transform和opacity來設(shè)計(jì)css3動畫疼约，不使用position的left和top來定位
利用translate3D開啟GPU加速
參考《High Performance Animations》
fixed bug
ios下fixed元素容易定位出錯(cuò)，軟鍵盤彈出時(shí)蝙泼，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好程剥，軟鍵盤彈出時(shí)，不會影響fixed元素定位
ios4下不支持position:fixed
解決方案：可用isroll.js汤踏，暫無完美方案
參考
《移動端web頁面使用position:fixed問題總結(jié)》
《使用iScroll.js解決ios4下不支持position:fixed的問題》
如何阻止windows Phone的默認(rèn)觸摸事件
winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone默認(rèn)觸摸事件 */
參考：《Windows phone 8 touch support》
