Internet Explorer可能會成為開發人員的焦點，因為它具有無數的兼容性問題。本文介紹瞭一些HTML，CSS和JavaScript解決方法。在首次推出7年的時間內，Internet Explorer占據瞭95％的市場份額，但其份額從此崩潰至3.2％。目前，IE遇到大量兼容性問題，並且為瞭增加它的麻煩，甚至微軟已經從IE的早期版本中撤回瞭它的所有支持，並將其重點轉移到瞭新的瀏覽器Microsoft Edge上。但即使市場份額下降和缺乏支持，IE依然設法在市場上占有相當的份額，當我這樣說的時候相信我，即使IE瀏覽器的很小一部分用戶的體驗可能會造成或破壞你的品牌，這對測試兼容性問題是絕對關鍵的。盡管跨瀏覽器兼容性是一件大事，但所有瀏覽器的表現仍然不同，即使涉及邊距和填充的處理方式，字體如何呈現，或者元素的默認樣式如何解釋等等。 IE本身帶有這樣的問題，在這裡我將要討論一些最突出的問題。1.頁面元素更窄這是Internet Explorer中最臭名昭著的CSS問題之一，甚至有它自己的名字 – Internet Explorer Box Model bug。這是早期IE版本處理元素大小的方式，或者說，網頁中的盒子模型，使得頁面元素看起來更窄。這是因為IE引擎無法呈現HTML元素的大小，如W3C推薦用於CSS的margin和padding。最安全的方法是使用條件註釋，這些註釋的內容隻能被指定的瀏覽器讀取。條件註釋的基本形式如下，可用於指定IE的條件。<!–[if IE ]><link href=”iecss.css” rel=”stylesheet” type=”text/css”><![endif]–>2.消失的背景圖像IE有時會使背景圖像甚至浮動元素所包圍的文本消失，尤其是在向上或向下滾動網頁時。刷新頁面後，背景通常會重新出現。解決此問題的一種方法是將CSS命令插入 position: relative 包含背景圖像的CSS規則中。你可以試試這個命令：.try {background: url(filename.jpg);position: relative}3.頁面的無版本的閃爍有時，當加載網站時，在外部CSS樣式表的加載完成之前，頁面的未風格版本可能會出現一兩次。這是Unstyled內容Flash（FOUC）的一個案例。樣式規則加載後，頁面立即自行糾正。但是，這個bug仍然令人煩惱，並且經常令人困惑。解決此問題的一種方法是使用John Polacek共享的方法，即將以下腳本插入文檔的頭部。<style type=”text/css”>.no-fouc {display: none;}</style><script type=”text/javascript”>document.documentElement.className = ‘no-fouc’;// add to document ready: $(‘.no-fouc’).removeClass(‘no-fouc’);</script>然後將其添加到文檔就緒事件中：$(‘.no-fouc’).removeClass(‘no-fouc’);4.雙邊距有時，在IE中，margin屬性可以加倍，例如，對於浮動元素來說，5px的歸因邊距最終可以達到10px。這個bug被稱為雙重保證金錯誤，在IE6中非常持久。但其修復非常簡單。所有必須做的事情是將 display: inline規則應用於CSS中的浮動元素。#content {float: left;width: 500px;padding: 10px 15px;margin-left: 20px;display: inline;}5.容器的下降IE6瀏覽器僅部分支持寬度，甚至是高度屬性，因此它允許容器增長以容納內容。這種無意識的增長迫使相鄰的元素下降，絕對搞亂瞭頁面佈局。這個錯誤被稱為Float-Drop錯誤，並且可以通過設計一個帶有負片右邊距的代碼框來輕松修復該錯誤 position: relative。.fixMe {margin-right: -100px;position: relative;}6.閃爍的背景圖像在IE6中，當CSS sprites用作鏈接或按鈕的圖像時，背景圖像有時會閃爍。這是因為瀏覽器無法正確緩存背景圖像並不斷重新加載它們。這個錯誤有一個非常簡單的修復方法，一行JavaScript強制瀏覽器緩存圖像。try {document.execCommand(‘BackgroundImageCache’, false,true true);}catch(e) {}7.具有最小高度屬性的案例設置元素的最小高度對於獲得像素完美圖像是必不可少的，但是IE6完全忽略瞭這個屬性，隻是從聲明的最小高度獲取高度值。這個問題的即時修復是共享代碼片段。#inner-container {min-height: 140px;height: auto !important;height: 140px;}結論這些是一些最突出的問題，以及它們的簡單修復。我希望你會發現它們有助於使你的網頁在不同的瀏覽器上看起來和功能保持一致，盡管行業正朝著標準化發展，渲染引擎變得更加一致，但我知道這仍然是一項艱巨的任務。但是IE自帶瞭一系列問題，使得制作兼容像素完美的頁面變得非常具有挑戰性。因此，需要確保兼容性問題是真正解決的，並且不能僅僅依靠實施未經驗證的對策。為此，您可能需要一個跨瀏覽器測試工具， 以便您可以在所有支持的操作系統中測試所有版本的IE和Edge，並確保您的頁面在IE版本和操作系統的不同組合中以您希望的方式顯示。所以，隻需 查找， 調試和 測試。然後重復，直到你有一個完美的網站。直到那時，快樂的測試！