瀏覽器兼容性問題

• 使用meta標籤來調節瀏覽器的渲染方式，告訴瀏覽器用哪一種內核渲染，360雙核瀏覽器就是在ie和chrome之間來回切換，如今使用meta標籤來強制使用最新的內核渲染頁面

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

• rgba不支持IE8 解決：用opacity

• CSS3前綴

  -webkit- webkit渲染引擎  chrome/safari
  -moz gecko引擎	firefox
  -ms- trident渲染引擎 IE
  -o-	opeck渲染引擎 opera

• 過渡不兼容IE8，能夠用JS動畫實現

• background-size不支持IE8，能夠用img

• 使用PIE.htc讓IE6/7/8支持CSS3部分屬性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA屬性

  .border-radius {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background: #abcdef; behavior: url(css/PIE.htc); } 

• 用css hack

  IE6: _
  IE7/7: *
  IE7/Firefox: !important
  IE7: *+
  IE6/7/8: \9
  IE8: \0

• IE浮動下margin產生的雙倍距離，一般使用float:left來實現，瀏覽器存在兼容性問題，致使圖片與 後面的內容存在margin不一致的問題，解決方法就是給圖片添加diaplay:inline便可

• ie8不支持nth-child，但支持first-child和last-child，能夠經過轉化寫法來處理問題，span:nth-child(2)能夠轉換爲span:first-child+span,能夠使ie8顯示該內容，last-child能夠自定義一個class類兼容ie8寫法

• IE8下不支持HTML5屬性placeholder，解決問題的js插件挺多的，經常使用的使用jquery.JPlaceholder.js插件處理問題

• 識別HTML5元素，IE中可能沒法識別nav/footer，使用html5shiv

• 火狐下表單阻止表單默認提交事件：在form中添加 action="javascript:",秒殺上述全部默認行爲;

• 始終爲按鈕button添加type屬性，IE下的默認類型是button，其餘瀏覽器下的默認類型是submit

• IE下刪除全部沒必要要的console語句，IE下當遇到console時不識別以後報錯，代碼不會執行，或者全局自定義一個window.console方法

• IE瀏覽器下因爲參數過長致使經過GET請求下載文件方法報錯，解決改成POST請求

• IE瀏覽器下iframe彈窗中輸入框光標丟失（沒法輸入）問題，解決清一下frame

• 兼容IE8 new Date()返回NaN問題，解決自定義方法

  function parseISO8601(dateStringInRange) { var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, date = new Date(NaN), month, parts = isoExp.exec(dateStringInRange); if(parts) { month = +parts[2]; date.setFullYear(parts[1], month - 1, parts[3]); if(month != date.getMonth() + 1) { date.setTime(NaN); } } return date; }