本文件讨论了Internet Explorer (IE) 的版本兼容性问题及其对W3C标准的遵守情况，强调IE6及其之前的版本不符合标准，而IE7之后逐步改善。文中介绍了如何通过使用条件注释、适当的Doctype声明和设置x-ua-compatible标签来优化旧版网站的表现，并建议开发者考虑最新的Web标准和框架。最后，文章还提及了是否继续支持旧版浏览器的必要性和相关安全性考量。

1. 1
Internet Explorer相容性設計考量
2013/08/02

2. IE相容性問題
2
IE6(含)之前的版本，不符合W3C標準
IE7之後逐步往符合W3C標準修正
過往為符合IE6之前版本而開發的歷史包袱
成也ASP.NET，敗也ASP.NET

3. IE對新舊格式網頁的處置方式*
3
• 會使用舊版IE(4、5、6)的錯誤方式(不符合W3C標準) 來排版。
• 未指定!DOCTYPE directive或其指定非標準模式文件類型，會自動使用Quirks Mode。
Quirks Mode(接縫模式)
• IE會透過HTML中指定的!DOCTYPE去自動選擇適當的模式。
• IE7標準模式：和IE7下的標準模式相同，不支援IE8下的CSS功能，也因此不會遇到IE8
更改後的CSS問題。
• IE8標準模式：支援新CSS功能的標準模式，是IE8遇到對於支持HTML/XHTML標準的網
頁時自動採用的模式。
• IE9、10標準模式：符合目前最新的標準，如HTML5(部份)、CSS3、SVG和其他標準模
式提供最大的支援。
標準模式

4. 4
既有網站的因應*
CSS
hack
針對各瀏覽器對CSS解譯的「bug」來處理
無法通過W3C檢測
IE各版本間的調整皆不同
每種瀏覽器需各作一版本CSS來對應
<style type="text/css">
#test {
width: 400px;
height: 400px;
background-color: blue; /*firefox*/
background-color: red9; /*all ie*/
background-color: yellow0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color: orange; /*ie6*/
}
:root #test {
background-color: purple9;
} /*ie9*/
@media all and (min-width:0px) /*opera*/
{
#test {
background-color: black0;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) /*chrome and safari*/
{
#test {
background-color: gray;
}
}
</style>
• CSS hack參考：http://www.communis.co.uk/dithered/css_filters/css_only/

5. 既有網站的因應
5
IE8以上版本提供的「X-UA-Compatible」中繼標籤
• 將X-UA-Compatible中繼標籤放到各網頁的 HEAD 項目中
• 格式：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
• 用來告知IE以何種方式呈現網頁
• 修改Web.Config
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
1. 修改HTML*
2. 修改Server端設定*

6. 既有網站的因應
6
3. 修改IIS設定*
• APACHE設定可參考：http://msdn.microsoft.com/zh-tw/library/cc817573.aspx

7. 7
既有網站的因應
HTML Meta Tag Web.Config IIS META Switch
> >
4. IIS決定設定的優先順
序

8. 既有網站的因應
8
設定值 說明
IE=EmulateIE8
判斷!DOCTYPE，若符合支援標準則使用IE=8模式，反之則
使用Quirks Mode
IE=EmulateIE7
判斷!DOCTYPE，若符合支援的標準則使用IE=7模式，反之
則使用Quirks Mode
IE=EmulateIE9
判斷!DOCTYPE，若符合支援的標準則使用IE=9模式，反之
則使用Quirks Mode
IE=5 Quirks Mode
IE=7、IE=8、IE=9 指定使用IE版本的標準模式
IE=edge
使用當前IE所支援的最新標準，如在IE10裡便會採用IE10標
準模式
Chrome=1 啓用Chrome Frame(若有安裝)
X-UA-Compatible Content設定
 可使用複合式設定，IE會挑選最適合目前版本的選項，如：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;IE=edge"/>

9. 既有網站的因應
9
比較靈活的作法
語法 說明
<!-- [if IE]>內容<![endif] --> 內容僅ie 瀏覽器會顯現
<!-- [if IE 6]>內容<![endif] --> 內容僅ie6 會顯現
<!-- [if lt IE 7]>內容<![endif] --> 內容僅在比 ie7 更舊的版本會顯現
<!-- [if gte IE 8]>內容<![endif] --> 內容僅ie8 及較新版本會顯現
<!-- [if !IE]>-->內容<!--<![endif] --> 內容除 ie 以外都會顯現
<!-- [if !(IE 6)]>內容<![endif] --> 內容除 ie6 以外的 ie 都會顯現
<!-- [if (gte IE 6)&(lt IE 8)]>內容<![endif] --> 內容只從 ie6 以後及 ie8 之前版本會顯現。
<!-- [if (IE 7)|(IE 6)]>內容<![endif] --> 內容只有 ie7 及 ie6 會顯現
<!-- [if gte IE 7]><!-->內容<!--<![endif] --> 內容在 ie7 及其較新版本，及 ie 以外的瀏覽器都會顯現
1. 在HTML使用條件式註解(IE10已不再支援)*
運算子 說明
lt lower than
lte lower than or equal to
gt greater than
gte greater than or equal to
! not
( ) sub expression
& and
| or
若瀏覽器是IE7則使用IE7自動模式
<!-- [if IE 7]> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <![endif] -->
若瀏覽器版本比IE7還舊，則使用Quirks Mode
<!-- [if lt IE 7]> <meta http-equiv="X-UA-Compatible" content="IE=5"/><![endif] -->

10. 既有網站的因應
10
HttpBrowserCapabilities myBrowser = Request.Browser;
HtmlMeta myMeta = new HtmlMeta();
myMeta.HttpEquiv = "X-UA-Compatible";
string Content = string.Empty;
if (myBrowser.Browser.Equals("IE"))
{
switch (myBrowser.Version)
{
case "5":
case "6":
Content = "IE=5";
break;
case "7":
Content = "IE=EmulateIE7";
break;
default:
Content = "IE=edge";
break;
}
}
myMeta.Content = Content;
Page.Header.Controls.Add(myMeta);
2. 在後端程式判斷Client端瀏覽器版本後， 再動態插入META標籤

11. 既有網站的因應
11
正確的DOCTYPE設定非常重要！
告訴瀏覽器XHTML/HTML符合哪個W3C標準版本
IE標準模式判讀和排版的依據
缺少DOCTYPE或格式錯誤時，IE會使用Quirks Mode
根據DOCTYPE設定選擇IE相容版本
一個字都不能錯！
• 正確格式可至W3C網站參考：http://www.w3.org/QA/2002/04/valid-dtd-list.html
(Document Type)

12. 既有網站的因應
12
ASP.NET在IE10有部份功能異常，可安裝hotfix解決
*
 A hotfix is available for the ASP.NET browser definition files in the .NET Framework 2.0
SP2 and in the .NET Framework 3.5 SP1
 A hotfix is available for the ASP.NET browser definition files in the .NET Framework 3.5.1
 A hotfix is available for the ASP.NET browser definition files in the Microsoft .NET
Framework 4.0
請持續追蹤 MDSN發布的消息

13. 既有網站的因應
13
各大入口網站都怎麼做？
DEMO TIME

14. 開發新網站的考量
14
舊版瀏覽器還有支援必要嗎？
• 已經不支援主流標準(ex: HTML5)
• 原廠已不再更新及維護
• 安全性考量
• 大廠紛紛不再支援過舊的版本
符合W3C標準化
• HTML5
• HTML 4.X
• ……
MVC Pattern
• 彈性
• 高度自主性
• 不必受限於控制項的限制
使用主流CSS Framework
• Twitter Bootstrap
• Less Framework
• Kube
• ……
使用主流JavaScript Framework
•Angular JS
•Ext JS
•jQuery
•Knockout JS
•……

15. 邁向標準化*
15

16. 事情總是充滿迷思
16

17. 事情總是充滿迷思
17
Internet Explorer已經悔改了!?
 Web Standards Project測試網址：http://acid3.acidtests.org/
IE 10 Firefox 22 Chrome 28 Opera 25

18. 事情總是充滿迷思
18
Parts of the following standards are tested by Acid3*
HTTP 1.1 Protocol
DOM Level 2 Views
HTML 4.01 Strict
DOM Level 2 Traversal (subtests 1–6)
DOM Level 2 Range (subtests 7–11)
Content-Type: image/png; text/plain (subtests 14–15)
<object> handling and HTTP status codes (subtest 16)
DOM Level 2 Core (subtests 17, 21)
ECMAScript GC (subtests 26–27)
DOM Level 2 Events (subtests 17, 30–32)
CSS Selectors (subtests 33–40)
DOM Level 2 Style (subtest 45)
DOM Level 2 HTML (subtest 60)
Unicode 5.0 UTF-16 (subtest 68)
Unicode 5.0 UTF-8 (subtest 70)
HTML 4.0 Transitional (subtest 71)
SVG 1.1 (subtests 74, 78)
SMIL 2.1 (subtests 75–76)
SVG 1.1 Fonts (subtests 77, 79)
ECMAScript Conformance (subtests 81-96)
Data URI scheme (subtest 97)
XHTML 1.0 Strict (subtest 98)

19. 事情總是充滿迷思
19
One more test for HTML5
IE 10 Firefox 22 Chrome 28 Opera 25
 HTML5測試網址：http://html5test.com

20. Q&A
20