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


前言

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

一、IE瀏覽器下,沒有達到出現滾動條的條件,但是出現了滾動塊的問題

滾動塊就是個灰色的方形,滾動條的兩邊。出現這種情況,一般是你的某個css文件,將哪個地方的overflow設置成了scroll,所以強行出現。改為overflow-y:auto即可。

二、IE瀏覽器下引入的樣式不生效,其他瀏覽器正常

這個問題是因為IE瀏覽器對引入的資源做了限制。限制規則總結一下: 

1、文檔中只有前31個link或style標記關聯的CSS能夠應用。

2、一個style標記只有前31次@import指令有效應用。
3、一個css文件只有前31次@import指令有效應用。
4、@import最多可支持4個級別。
5、一個css文件最多4095條規則。
在網上看了一下原理,是因為IE9使用32位整數來進行標識,排序和應用級聯規則。整數的32位被分成5個字段,四個5位的sheetId和一個12位的ruleId。5位sheetID導致31 @import限制,12位ruleID導致4095規則每張限制。
一般來說,這種限制大多數時候都會滿足,可能說開發框架引入了大量的冗余css,這種可以將頁面需要的css提前,將頁面不需要的css往后放。也可以采用css合並壓縮機制。

三、強制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瀏覽器內核,而且支持IE6、7、8等多個版本的IE瀏覽器

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

參考文章鏈接:

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

https://www.cnblogs.com/chendc/p/5423337.html

四、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提交的方式。
 

五、IE下不設置背景顏色

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

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

基本是padding的問題,有可能是別的css沖突導致,可自行設置 加上important來提升優先級。

七、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;
}

八、IE9不支持flex布局

現在使用flex布局較多。可以實現互相之間的寬度互補。但是IE並不支持。

於是兩個div的情況下,使用display:inline-block與float配合使用。同時需要對寬度來進行定義。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM