IE瀏覽器兼容性調整總結技巧

時間 2019-11-13

標籤瀏覽器兼容性調整總結技巧欄目瀏覽器简体版

原文原文鏈接

前言

最近項目作完，用戶須要兼容IE，因而開展了兼容性的調整工做。邊調整邊想感嘆IE真是個沙雕。。特將我遇到的問題記錄下來，以及記錄個人解決辦法，如下問題及解決辦法，都是真實可用的，本人親測~~css

1、IE瀏覽器下，沒有達到出現滾動條的條件，可是出現了滾動塊的問題

滾動塊就是個灰色的方形，滾動條的兩邊。出現這種狀況，通常是你的某個css文件，將哪一個地方的overflow設置成了scroll，因此強行出現。改成overflow-y：auto便可。html

2、IE瀏覽器下引入的樣式不生效，其餘瀏覽器正常

這個問題是由於IE瀏覽器對引入的資源作了限制。限制規則總結一下： java

一、文檔中只有前31個link或style標記關聯的CSS可以應用。chrome

二、一個style標記只有前31次@import指令有效應用。

三、一個css文件只有前31次@import指令有效應用。

四、@import最多可支持4個級別。

五、一個css文件最多4095條規則。

在網上看了一下原理，是由於IE9使用32位整數來進行標識，排序和應用級聯規則。整數的32位被分紅5個字段，四個5位的sheetId和一個12位的ruleId。5位sheetID致使31 @import限制，12位ruleID致使4095規則每張限制。

通常來講，這種限制大多數時候都會知足，可能說開發框架引入了大量的冗餘css，這種能夠將頁面須要的css提早，將頁面不須要的css日後放。也能夠採用css合併壓縮機制。

3、強制ie以最新的版本模式對頁面進行渲染

介紹一行代碼瀏覽器

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

X-UA-Compatible是IE8的一個專有<meta>屬性，它告訴IE8採用何種IE版本去渲染網頁，在html的<head>標籤中使用。框架

Edge 模式告訴 IE 以最高級模式渲染文檔，也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染，避免版本升級形成的影響。函數

簡單的說，就是什麼版本 IE 就用什麼版本的標準模式渲染。佈局

chrome=1 這個並非IE模擬chrome，而是谷歌本身作的一個外掛：Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器post

要使用chrome=1，要安裝GCF，而且指定頁面使用chrome內核來渲染。flex

參考文章連接：

https://blog.csdn.net/MEdwardM/article/details/52984648

http://www.javashuo.com/article/p-uniyelkc-cs.html

4、IE下get請求報錯：java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

這種問題是由於get鏈接提交的參數中包含了特殊符號或中文字符。形成瀏覽器不認識，沒有進行轉義。

這種解決辦法能夠調用encodeURI函數來對提交的變量進行一次轉義。或者使用post提交的方式。

5、IE下不設置背景顏色

對於背景顏色透明，咱們使用了background:unset來進行設置，可是發現IE瀏覽器不生效，IE9不支持unset屬性。因而咱們可使用transparent屬性。

6、IE下inout框中內容顯示不全，點擊時晃動

基本是padding的問題，有多是別的css衝突致使，可自行設置加上important來提高優先級。

7、IE9不支持startwith與endswith函數

這種方式能夠用substring函數來模擬使用。也能夠本身重寫一個函數來進行使用。

本身實現的函數以下：

String.prototype.startWith = function(s) { 
 if (s == null || s == "" || this.length == 0 || s.length > this.length) 
 return false; 
 if (this.substr(0, s.length) == s) 
 return true;
 else 
 return false; 
 return true; 
}

String.prototype.endWith = function(s) {
     if (s == null || s == "" || this.length == 0|| s.length > this.length)
          return false;
     if (this.substring(this.length - s.length) == s)
          return true;
     else
          return false;
    return true;
}