IE瀏覽器相容性調整總結技巧
前言
最近專案做完,使用者需要相容IE,於是開展了相容性的調整工作。邊調整邊想感嘆IE真是個沙雕。。特將我遇到的問題記錄下來,以及記錄我的解決辦法,以下問題及解決辦法,都是真實可用的,本人親測~~
一、IE瀏覽器下,沒有達到出現滾動條的條件,但是出現了滾動塊的問題
滾動塊就是個灰色的方形,滾動條的兩邊。出現這種情況,一般是你的某個css檔案,將哪個地方的overflow設定成了scroll,所以強行出現。改為overflow-y:auto即可。
二、IE瀏覽器下引入的樣式不生效,其他瀏覽器正常
這個問題是因為IE瀏覽器對引入的資源做了限制。限制規則總結一下:
1、文件中只有前31個link或style標記關聯的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配合使用。同時需要對寬度來進行定義。