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配合使用。同時需要對寬度來進行定義。