ie兼容，手機端兼容問題

兼容性:

1.ie6，7不能兼容border-radius；
若須要能夠用圖片的方式進行模擬。

2.ie6, 7中若是兄弟元素沒有給左浮動，而自己給了右浮動，將會出現塌陷（也就是掉下去）；
如須要能夠將右浮動的元素寫在左邊元素的前面。如：<span style="float:right"></span><p></p>

3.ie6, 7不兼容ES6的寫法，因此寫js的時候要注意。

4.ie6,7對CSS3的一些屬性不能識別。
好比animation；建議本身用jquery的animate（）方法實現。

5.ie6,7不識別僞類。

6.圖片會自帶3px；
解決方法：display：block；

7.a標籤包含img，會出現藍色邊框；
解決方法：border：0；

8.ie8及如下，有時候會遇到一個問題，當你用一個圖片覆蓋了整個頁面，且你給了z-index屬性，在下面的盒子中，空白處都會默認爲這個圖片。（png格式圖片）
解決方法：要給此盒子加background去覆蓋這個層級關係，才能夠選中此盒子對應的空白處。

9.ie6兼容min-height
解決方法：min-height：value；height：auto！important；height：value；（注意順序不能換）。

10.表單元素距離頂部不一致
運用float來解決。

11.margin外邊距重疊，相互並列的兩個元素，一個給了margin-top，一個給了margin-bottom，瀏覽器按照二者之間較大的值進行解析
解決方法：給其中一個元素加overflow：hidden。

12.padding-bottom給像素值時，在谷歌和ie瀏覽器中值有誤差。
解決方法：換成給元素高，不給padding-bottom。

13.解決IE6,IE7不能隱藏(overflow:hidden)絕對定位溢出的內容
解決方法：哪一個須要設置overflow；hidden，生效，就在哪一個上面設置position:relative;

14.有時候頁面屏幕變小，內容背景顯示不徹底。
解決方法：給個最小寬度。

15.ie8如下調用json文件，json數據的對象必須完整。

16.ie6下多個li包a，li給了浮動，當a爲塊元素時，li不在一排，掉了下來。
解決方法：給a加display：inline-block；

17.ie6支持hover

18.IE6下png背景不透明問題的綜合拓展：
https://www.zhangxinxu.com/wordpress/2009/08/ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/

19.ie6不支持png24格式保存下的透明背景，支持png8：由於png24格式下的透明是Alpha透明。

H5移動端ios/Android兼容性：

1.寫背景圖background時最好加上top left 或者0 0 否則寫運動效果時容易出現跳

2.禁止複製、選中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

3.蘋果手機固定定位有bug 檢查html和body是否是設置了overflow-x:hidden;

4.給不一樣屏幕大小的手機設置特殊樣式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

 

5.ios 設置input 按鈕樣式會被默認樣式覆蓋
解決方式以下：
input,textarea {
border: 0;
-webkit-appearance: none;
}

6.消除 IE10 裏面的那個叉號:input:-ms-clear{display:none;}

7.input 的placeholder屬性會使文本位置偏上
line-height: （和input框的高度同樣高）---pc端解決方法
line-height：normal ---移動端解決方法

8.input type=number以後，pc端出現上下箭頭

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}

 

9.實現android和ios系統手機打開相機並可選擇相冊功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>

 

$(function () {

//獲取瀏覽器的userAgent,並轉化爲小寫
var ua = navigator.userAgent.toLowerCase();

//判斷是不是蘋果手機，是則是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

if (isIos) {
$("input:file").removeAttr("capture");
};
})

 

10.移動端 HTML5 audio autoplay 失效問題
這個不是 BUG，因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，
因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才能夠播放。

解決方法思路：先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）。

 

11.iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 爲 none 能夠解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，
所以最佳方案是將 text-size-adjust 爲 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;

12.移動端儘可能用touch的相關事件去代替click等其餘鼠標事件。

13.微信端調用type=file，選擇文件，accept要這樣寫「image/*」；不然有些手機可能會出現選了圖片沒反應。

14.解決第三方網頁在微信瀏覽器中點擊圖片自動放大：

傳統方式： $(document).on(‘click’, ‘img’, e => { e.preventDefault(); }) 這個方式可能會把全部的默認的屬性都屏蔽了，典型的就是a標籤不能跳轉 css方式： img{ pointer-events: none; } 這個會讓img標籤的點擊事件失效，若是想要點擊圖片就要給上面再寫一層 Vue方式： v-on:click.prevent或者@click.prevent 既能保證img標籤的click，也能保證在微信中不自動放大，完美解決