台灣微軟技術支援部技術支援經理 沈志豪 1
Agenda IE 提供的相容性功能 調整文件模式 (Document Mode) 調整瀏覽器模式 (Browser Mode) 使用者代理程式字串 (User Agent) 如何讓 IE11 自動化套用適當的文件模式 Meta Tag 相容性檢視 (Compatibility View) 企業模式 (Enterprise Mode) 5.1 v2 相容性問題排除策略 2
12 January 2016 Explorer 技術支援週期 2016 年 1 月 12 日起, 停止支援各平台舊版 IE 瀏覽器! 3
如何將您的企業網站升級, 相容於 IE11 4
HTML CSS Script Plug-In IE 升級!!! 開發 / 設計人員面臨到的相容性挑戰 5
1. CSS 2. Script 3. Plug-In 4. HTML IE 升級!!! 開發 / 設計人員面臨到的相容性挑戰 6
HTML Code: <Table> <TR> <TD> Data 1 </TD> </TR> <TR> <TD> Data 2 </TD> </TR> </Table> 7
案例 :Script IE10+ 開始不支援 Conditional Comments 8
案例 :Script IE11 開始不支援 VBScript 9
案例 :CSS 支援的 CSS 語法改變 IE7 相容於 CSS 2.0 IE8 相容於 CSS 2.1 及部份 CSS 3.0 IE9+ 相容於 CSS 3.0 10
Web App 開發 維護策略 舊有的 Web App 透過 IE11 的相容模式執行 新開發的 Web App MVC 架構 ASP.NET Core 1.0 11
IE 提供的相容性功能 12
IE8 開始, 提供了相容性檢視功能 手動設定 (IE8~IE10) ( 模擬 IE7 / IE5) 工具 => 相容性檢視清單 (IE8~IE11) 13
同時,IE8 開始也內建 F12 Dev Tools 檢視 / 切換 瀏覽器模式 文件模式 (Browser Mode) (Document Mode) 14
同時,IE8 開始也內建 F12 Dev Tools 檢視 / 切換 瀏覽器模式 文件模式 (Browser Mode) (Document Mode) 15
IE 文件模式 (DOCUMENT MODE) 16
如何從伺服器端設定 IE 文件模式 Page: <head> <!-- Use IE7 mode --> <meta http-equiv="x-ua-compatible content="ie=emulateie7" /> <title>my Web Page</title> </head> 17
X-UA-Compatible 決定您的文件模式 18
如何從伺服器端設定 IE 文件模式 Page: <head> <!-- Use IE7 mode --> <meta http-equiv="x-ua-compatible content="ie=emulateie7" /> <title>my Web Page</title> </head> 19
如何從伺服器端設定 IE 文件模式 Page <head> <!-- Use IE7 mode --> <meta http-equiv="x-ua-compatible content="ie=emulateie7" /> <title>my Web Page</title> </head> IIS/ASP.NET Web.Config <?xml version="1.0" encoding="utf-8"?> <httpprotocol> <customheaders> <clear /> <add name="x-ua-compatible" value="ie=emulateie7" /> </customheaders> </httpprotocol> 20
如何從伺服器端設定 IE 文件模式 在 IIS 上, 為網站加入 HTTP response header: 21
IE 11 企業模式 (ENTERPRISE MODE) 22
文件模式一覽 Explorer 7 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 5 Explorer 6 23
IE7 提供的文件模式 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 7 Explorer 5 Explorer 6 HTML 內文 IE7: DOCTYPE tag IE5 :DOCTYPE tag 24
IE8 提供的文件模式 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 7 Explorer 5 Explorer 6 相容性檢視 IE7: DOCTYPE tag IE5 :DOCTYPE tag 25
IE9 提供的文件模式 Explorer 7 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 5 Explorer 6 26
IE10 提供的文件模式 Explorer 7 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 5 Explorer 6 27
IE11 提供的文件模式 Explorer 7 Explorer 8 Explorer 9 Explorer 10 Explorer 11 Explorer 5 Explorer 6 28
IE11 提供的文件模式 Explorer 11 (Edge) Explorer 10 Explorer 9 Explorer 8 Explorer 7 (CV) Explorer 5 (Quirks) Explorer 11 29
企業模式 1.0 (2014.04 IE CU) Explorer 11 (edge) Explorer 10 Explorer 9 Explorer 8 Explorer 7 (CV) Explorer 5 (Quirks) IE8 Enterprise Mode Explorer 11 30
企業模式 2.0 (2014.04 IE CU) Explorer 11 (edge) Explorer 10 Explorer 9 Explorer 8 Explorer 7 (CV) Explorer 5 (Quirks) IE8 Enterprise Mode (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) Explorer 11 31
企業模式 3.0 (2014.04 IE CU) Explorer 11 (edge) Explorer 10 Explorer 9 Explorer 8 Explorer 7 (CV) Explorer 5 (quirks) IE8 Enterprise Mode IE7 Enterprise Mode (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2015.05 IE CU) Explorer 11 32
企業模式 4.0 (Windows 10 Edge) (2015.07) https://eatm.firstbank.com.tw/lio1000s8 33
企業模式 5.1 (2016.06 IE CU) Enterprise Mode schema v.1 Enterprise Mode schema v.2 ( 建議 ) https://technet.microsoft.com/en-us/itpro/internet-explorer/ie11-deploy-guide/enterprise-mode-schema-version- 2-guidance 簡化定義標籤 支援 Http Ports 提供 Compat Page 功能 34
相容性檢視 VS. 企業模式 IE8+ 相容性檢視 模擬 IE7 IE11 RTM( 無企業模式 ) IE11 企業模式 1.0 模擬 IE8 IE11 企業模式 2.0 模擬所有的文件模式 IE11 企業模式 3.0 模擬 IE7, 取代 CV IE11 企業模式 4.0 Edge 轉導到 IE 的選項 IE11 企業模式 5.1 v2 IE Edge (Automation) (2014.04 IE CU) (2014.11 IE CU) (2014.11 IE CU) (2015.07 Win 10) (2016.06 IE CU) 35
企業模式的運作 Enterprise Mode 36
企業模式的站台的管理 Enterprise Mode Site List 4.0 <rules version="3"> <emie> <domain exclude="false">crm <path exclude="true">/newmodule</path> </domain> </emie> <docmode> <domain docmode="9">webtool</domain> </docmode> </rules> 37
企業模式的站台的管理 Enterprise Mode Site List 5.1 v2 https://www.microsoft.com/en-us/download/details.aspx?id=49974 <site-list version= 5"> <site url="www.woodgrovebank.com:443"> </site> </site-list> <compat-mode> default IE7Enterprise IE8Enterprise IE7 IE8 IE9 IE10 IE11 </compat-mode> <open-in> none IE11 MSEdge </open-in> 38
企業模式的派送 GPO Computer Configuration\Administrative Templates\Windows Components\ Explorer - Let users turn on and use Enterprise Mode from the tool menu - Use the Enterprise Mode IE website list Registry HKLM\SOFTWARE\Policies\Microsoft\ Explorer MicrosoftEdge\Main\EnterpriseMode HKCU\Software\Policies\Microsoft\ Explorer MicrosoftEdge\Main\EnterpriseMode HKCU\Software\Microsoft\ Explorer MicrosoftEdge\Main\EnterpriseMode HKLM\SOFTWARE\Microsoft\ Explorer MicrosoftEdge\Main\EnterpriseMode "SiteList"= "http://localhost/sites.xml" 39
JAVASCRIPT 撰寫建議 40
Detection if( condition ) { // Primary code } else { // Alternate code } 41
Version Detection if( navigator.useragent.indexof('msie')!= -1 ) { // Code written for browser X } else { // Code written for browser Y } 42
Feature Detection ( 建議 ) if( window.attachevent ) { // Code written for browsers // supporting attachevent } else { // Code written for browsers that // don't support attachevent } 43
課程摘要 (Summary) 瀏覽器模式 (Browser Mode) 文件模式 (Document Mode) Enterprise Mode Scripting Skill:Feature Detection 44
升級策略 1. 確認調整文件模式可以排除問題 2. 伺服器端調整文件模式 3. 若無法調整文件模式, 使用企業模式 45
測試策略 1. 建立 Win 10 IE11 環境 Option 1: 集中式虛擬機 Option 2: 為使用者配置第二台工作機器 2. 透過 Registry & Sitelist.xml 配置企業模式 3. 請使用者進行測試 46
Q & A 謝謝大家今天的參與! 47