HTML、CSS、JS中常用的東西在IE中兼容問題匯總

1.因為國內360瀏覽器、QQ瀏覽器等更新較快，所以不考慮Chrome支持某個css與否，因為一般都支持。

2.因為火狐等使用的人較少，且更新較快，所以不考慮支持與否，因為一般都支持

3.主要就是匯總css中一些常用的東西，在ie幾個版本的支持情況，如下

---------------------------------

注明：

• 初始寫作時間：2019年1月3日，以下都是基於這個時間點的情況
• 下面IE9+ 表示IE9及IE9以后的版本，可以這么用，是包含IE9本身的，其他同理
• 為何IE8還有份額，是因為windows xp只支持到IE8

------------------------------------------------------------------

HTML部分

------------------------------------------------------------------

1.  html5新增的標簽們，如<header> <footer> <nav> <section> 等，IE9+，【坑爹呀，xp下最高版本IE是IE8，不支持這些標簽，還需要用html5shiv.js，html5shiv.js必須放在頭部，放頁面后面，都加載出來了，就晚了】

   <style type="text/css">
       .header {
           background: blue;
       }
       header {
           background: red;
       }
   </style>
   
   ...
   
       <!--IE8不識別header標簽，而此時css中，用header和.header都選擇不到這個元素-->
   <header class="header">用在頁面的頭部或者版塊的頭部</header>

    

2. input的placeholder屬性，IE10+，【就是設置文本框默認顯示什么內容的，IE9不支持這個屬性，坑爹！】

 

 

------------------------------------------------------------------

CSS部分

------------------------------------------------------------------

1. CSS屬性選擇器，IE7+， 【想不到吧，IE7竟然是支持的！】 
2. transition，做動畫的，IE10+，  【用windows xp肯定沒戲了，但是win7系統還有那么多IE9的用戶也不能用，好坑啊】
3. transform，給元素變形的，旋轉縮放傾斜位移等，IE9要加-ms-前綴，IE10+， 【它就是css中一個新屬性名，配合transition才可以做出動畫，僅僅transform只能畫，不能動，就是IE9下，形狀是變了，不用js，沒有辦法緩慢的變】
4. border-radius，給元素設置圓角，IE9+支持，【IE9支持，還不需要加前綴，難得難得，不過win xp下只能到IE8，那么，xp下用IE是想看到這個屬性帶來的圓角是沒戲了】

 

------------------------------------------------------------------

JS部分

------------------------------------------------------------------

IE6\7\8下事件綁定函數用attachEvent，其他瀏覽器下用addEventListener