由于周末，早晨起來的比較晚，打開博客園轉轉，看到這樣的一篇博文，內容大致是說，服務器由于升級導致的用Asp.NET的UpdatePanel寫的下拉聯動失效了，這讓我聯想到了前段時間看到的一份資料，關于IE10和Asp.NET的故事。
博客園中看到的博文：
記錄asp.net在IE10下事件丟失排錯經過 http://www.cnblogs.com/weapon/p/3150584.html
博主最后總結 出的結論如下：
asp.net4.0出生得比IE10早，所以asp.net4.0以前版本不認識IE10 的 User-Agent 標頭，導致的后果就是ASP.NET 特定功能失效。
導致這個問題的原因大致就是這樣的，這個是微軟官方給出的bug及升級補丁（下文中也有詳細介紹關于IE10的問題）。
http:/msdn.microsoft.com/en-us/library/ie/hh869299(v=vs.85).aspx
下面我就目前了解的微軟新版本IE10或者IE11與IE10一下瀏覽器的區別和可能遇到的問題整理了下，貼出來供大家參考，難免有疏漏或者錯誤的地方，歡迎留言幫忙指正，共同進步。
第1章 網站遷移簡介
1.1 網站開發過去和現在
在過去專門針對IE6開發的系統中可能存在一些現在主流高版本瀏覽器不兼容的代碼或樣式，過去和現在Web開發的現狀如下圖。
IE版本從6升級到10過程中，由于IE10執行較新的Web標準，在IE9之前正確執行的代碼或渲染的樣式，在IE10中可能會失效，具體會在后面總結到。
1.2 解決兼容性方法
解決兼容性方法主要有兩個：修復、備選方案。
1.2.1 修復
可以通過設置網頁的兼容視圖/ 或者調整GPO完成修復。
了解下IE新版本帶來的變化：
每次使用一個新版本的瀏覽器，網站總是出錯，導致此類問題的原因一般如下：
用條件注釋來判斷瀏覽器版本，如：
<!-[if gte IE 5.5] <p>you are using IE5 or higher</p> <![endif]->
用用戶代理串User Agent String判斷瀏覽器類型，如：
注意：
(1) 在IE10中不再支持條件注釋語句，所以舊版本的web在IE10中可能顯示不正確。
(2) 在IE10的兼容性視圖中，User-Agent會變為IE7，如果代碼是通過這樣方式判斷，則不能處理后期新出現的用戶較多的瀏覽器的支持。
(3) 在舊版的服務器中，存在一個BUG，此bug將會導致服務器不會接收來自IE10的請求，需要升級服務器補丁，詳細請見MSDN：
鏈接地址: http://msdn.microsoft.com/en-us/library/ie/hh869299(v=vs.85).aspx
如何緩解兼容性問題：
普通用戶，使用兼容試圖按鈕
開發人員：使用X-UA-Compatible，限制瀏覽器顯示模式
管理人員：列出兼容性試圖，提交微軟，強制限制網頁顯示模式
處理專為IE6開發的網站應用顯示問題的方法：
關于Quirks模式介紹：
IE瀏覽器兼容性視圖顯示的一種，如圖。
但在IE10下，Quirks模式既支持最新的html標準，也支持IE老版本的標準；IE 5 Quirks模式只支持IE老版本的標準。
在IE9下，Quirks模式只支持IE老版本的標準。
1.2.2 備選方案
1.加入Browsium ION加載項，一個輕量級的可使用在IE9/10上的瀏覽器插件，可以顯示專為IE6/7所設計的網頁，但需要授權費用，詳細見網址：
2. Microsoft Enterprise Desktop Virtualization (MED-V) ，讓IE6運行在本地的一個虛擬化的XP實例中。
http://technet.microsoft.com/zh-cn/library/gg548505.aspx
3. Terminal Services(終端服務) 使用Windows 2003的Terminal Service把IE6發布為Remote App。
4. 在Windows 8上面使用Hyper-V客戶端 IE6可以運行在一個Hyper-V的虛擬機上。
第2章 兼容性測試工具介紹
2.1 Application Compatibility Toolkit
Application Compatibility Toolkit (ACT) 幫助您確定在部署之前，您的應用程序是否與新版本的 Windows 兼容，還有助于您確定操作系統新的如何影響將這些應用程序。
它可以：
實時查看基于 Web 的問題
IECTT 使您能夠在對 Internet Explorer 7 和 Internet Explorer 8 測試網站和 Web 應用程序時隨時找到并查看基于 Web 的問題。完成測試之后，可以在 IECTT 的 Live Data 屏幕中查看結果。
將 Web 問題上載到 ACT 數據庫中
IECTT 使您能夠將基于 Web 的問題上載到 ACT 數據庫中（ACT 數據庫會處理這些信息），并使您能夠在應用程序兼容性管理器的 Analyze 屏幕上查看結果。
2.2 Compat Inspector
Compat Inspector 是一種基于 JavaScript 的測試工具，可在站點運行時分析站點。Compat Inspector 報告導致在標準模式中出現問題的交互模式。這使您能夠迅速識別問題，而無需熟記大量文檔，無需在站點的全部代碼中進行搜索。但Compat Inspector 只能在IE9，10下的標準方式下運行。
使用方法訪問：http://ie.microsoft.com/testdrive/HTML5/CompatInspector/
集成在網頁中，及在網頁中加載一段js。
<script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script>
同時也可以集成到fiddler中。
使用時會在網頁右側顯示結果，如圖
點擊右上角的簡要報告，進入到報告細節
使用說明：
詳細指出頁面存在的兼容性問題
在Tests的tab中可以選擇要測試項目是否測試。
在Messages下的詳細列表中有debug選項，如圖
可以直接開啟瀏覽器的F12調試，自動進入有問題的斷點。
2.3 Modern.IE
Modern.IE是由微軟官方發布的一款在線測試軟件，開發人員可通過這組工具來測試自己的網站在新一代的 IE9、IE10或舊版瀏覽器上的效果，modern.IE 的程序偵測精靈(code detection wizard)能夠掃描并辨識出可能影響使用體驗的常見錯誤。
請訪問http://www.modern.ie/zh-cn查看詳情。
比如檢測http://www.baidu.com modern.IE給出如下報告，說明了該網頁存在的一些問題，并指出解決這些問題的方法。
第3章 常見的兼容性問題
3.1 文檔模式
文檔模式(<!DOCTYPE>)定義了IE瀏覽器如何來展示網頁，<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
詳細的標準及最終解析的標準見下圖（Q:Quirks模式，S：標準模式）：
詳情請點擊：http://msdn.microsoft.com/en-us/library/ff955379(v=VS.85).aspx
如何制定頁面的文檔模式。
使用 meta 元素，以在網頁中包含 X-UA-Compatible http-equiv 標頭。
例如：
• <meta http-equiv="x-ua-compatible" content="IE=7" >
• <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
• <meta http-equiv="x-ua-compatible" content="IE=edge" >
• <meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >
關于IE=7和IE=EmulateIE7的區別：
如果是寫IE=7,指一定要再ie7下運行
如果是IE=EmaluteIE7，這種寫法會根據文檔模式docment type判斷加載模式，其次才依據代碼限制的IE=EmaluteIE7執行。
3.2 用戶代理串
當訪問網站的時候，瀏覽器會發送一個User-Agent字符串給服務端，以表明瀏覽器類型、版本、操作系統類型等。Web服務器端可以根據這些信息返回不同的網頁信息。
通常情況下，很多網頁開發人員喜歡通過”User- Agent”頭信息來判斷用戶使用的是何種瀏覽器(稱為瀏覽器檢測)，這種方式存在極大的兼容性隱患。
例如使用如下方式實現檢測：
以下情況，該代碼會失效：
（1） 新的瀏覽器發布或瀏覽器更新，此時需要修改代碼。
（2） 推出的新設備中往往包含新版本的瀏覽器。
（3） 許多瀏覽器支持修改用戶代理 (User-Agent) 頭信息的功能。
推薦做法-使用更能檢測(Feature Detection)：
3.3 條件判斷
在早期版本的IE瀏覽器中，可以使用條件判斷語句來判斷是否是IE瀏覽器，以及其版本號，例如：
<!--[if IE 8]> <p>Welcome to Internet Explorer 8.</p> <![endif]-->
IE10已經不再支持條件判斷•使用條件判斷就如同使用User-Agent判斷瀏覽器類型一樣，存在類似的弊端•正確的做法是采用Feature Detection
3.4 腳本錯誤
IE10采用最新的web標準，可能之前能運行在IE9之前的腳本在IE10下會報錯，例如。
報錯原因即為元素的Id名稱大小寫不一致。
又如，IE10下不再支持濾鏡效果，許多基于腳本的濾鏡效果會失效，報出錯誤，如圖。
因此，為了盡量避免網站在IE9/10上發生兼容性問題，在開發一個新的Web應用或者對舊應用進行改版之前，開發人員務必先學習IE9和IE10的兼容手冊：
http://msdn.microsoft.com/en- us/library/ie/ff986083(v=vs.85).aspx
http://msdn.microsoft.com/en- us/library/ie/hh801219(v=vs.85).aspx
3.5 樣式錯亂
有些網頁在IE10下出現顯示錯亂，往往是因為沒有按照web標準來定義樣式所致，如web標準中定義text-align如下：
text-align 屬性規定元素中的文本的水平對齊方式。
如果有如下的html樣式定義，IE10就會出現表格不居中顯示，而IE9之前是居中顯示的：
<div style=”text-align:center;”>
<table><tr><td>我要在中間</td></tr></table>
</div>
第4章 常見兼容性問題排錯
4.1 常見問題
1.頁面顯示問題–顯示位置錯亂、顏色不對、排列不整齊、該顯示的內容沒有顯示等
2.功能問題–點擊按鈕沒有反應、動畫內容不播放、業務功能無法完成等
3.腳本報錯–彈出Javascript報錯框
4.ActiveX錯誤– ActiveX控件無法安裝、ActiveX控件不加載、 Flash不播放等
4.2 如何排錯
1. 簡化頁面，盡量用最簡單的頁面來重現問題
2. 審查文檔模式，嘗試使用各個文檔模式來顯示頁面
3. 對問題進行歸類：顯示問題、功能問題、腳本報錯或是 ActiveX問題
4. 審查網頁的源代碼
5. 使用工具對網頁進行排錯
第5章 調試工具介紹
5.1 F12 Developer Tools
F12開發人員工具是一套內置于IE9/10的網頁調試工具，可以調試以下問題：
- HTML
- CSS
- JS腳本錯誤和腳本性能（探查器tab）
- 網絡傳輸
5.2 Fiddler
Fiddler是一個HTTP調試工具，適用于調試以下問題：
(1) 網絡上的問題
(2) HTTP Response 錯誤
(3) 緩存
(4) 代理服務器問題
(5) 服務端的問題
(6) 服務端發回錯誤的Response
可適用于這些場合:
(1) 服務端通過User-Agent判斷瀏覽器類型
(2) Ajax請求的問題
(3) 響應時間問題
(4) HTTP安全(cookies丟失, 非法SSL)
(5) 可以查看HTTPS的包
(6) 可以把結果保存以便日后重播
操作界面如圖：
詳情可以查看詳細介紹：
http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html
5.3 Network Monitor
下載地址：
http://www.microsoft.com/en- us/download/details.aspx?id=4865
Network Monitor可以用來監控網絡活動
(1) 實時抓取并顯示結果
(2) 可以同時抓取多塊網卡上的網絡活動
(3) 可以保存日志以備日后打開分析
適用場合:
(1) 網絡底層的連接問題(比如代理服務器問題)
(2) Web Proxy Auto Discovery Protocol (WPAD)
(3) 審查每一個TCP包的具體內容
本人表達能力有限，只是整理了舊版網站遷移到IE10及更高版本瀏覽器可能出現的問題和相關解決方案，歡迎大家指正，謝謝！
文章列表
留言列表
