我相信所有 Web 開發人員與網頁設計師都對瀏覽器的相容性十分頭痛,除了不同瀏覽器版本難以掌控外,就連 Internet Explorer 瀏覽器各版本的相容性也一樣難以掌握,不過從 Internet Explorer 8 開始就針對各版本之間的相容性做出了許多強化,因此在本次的邊做邊學系列中將會詳述 Internet Explorer 8 到底內建了多少與相容性相關的技術,而開發人員又應如何利用這些特性協助我們開發出高相容性的網頁。

目錄

  • Internet Explorer 的歷史與相容性
  • Internet Explorer 8 的網頁顯示引擎與支援的標準
  • Internet Explorer 8 支援的瀏覽器模式與文件模式
  • 關於 Internet Explorer 8 的 User Agent 字串
  • Internet Explorer 8 瀏覽器支援的相容性技術
  • 結語

Internet Explorer 的歷史與相容性

在 Internet Explorer 5.5 以及更早的版本,由於W3C標準制訂的速度過慢,無法因應當時蓬勃發展的網際網路需求,因此當時的 Internet Explorer 版本只有非常少的標準支援,因此幾乎可以說 Internet Explorer 5.5 之前的瀏覽器與之後推出的瀏覽器幾乎沒什麼相容性可言。

另一方面來說,由於當時的網頁很難透過標準的網頁設計法則透過 CSS 進行網頁排版,因此大多網頁都以 TABLE 來進行版面配置,因此網頁也十分缺乏彈性,而在這版本之後我們通稱這類無法與 W3C 標準相容的顯示方式稱為Quirks模式,又稱為相容模式,瞭解 Quirks 這個名詞對未來進行相容性網頁開發會有些幫助。

Microsoft 在 2001 年推出 Internet Explorer 6 瀏覽器,這個版本已經開始利用 DOCTYPE 區別「標準模式」與「相容模式」的網頁,不過當時已經有不少網頁使用 Quirks 模式下撰寫網頁,並沒有養成利用標準模式來開發網頁的習慣,因此當時還是很少有頁面使用「標準模式」設計網頁,即便這是將近十年前的事了,不過至今還是有部分網頁設計師分不清楚「標準模式」與「相容模式」的差異,與使用標準模式開發網頁所帶來的效益。

Microsoft 在 2006 年推出 Internet Explorer 7 瀏覽器,這個版本相較於 Internet Explorer 6 已有大幅增進 與 W3C 標準的相容性,如果網頁設計師已經養成使用「標準模式」開發網頁的習慣,將可有效減少網頁相容性的問題,透過一些開發技巧即可解決瀏覽器之間的些微差異。

Microsoft 在 2009 年推出 Internet Explorer 8 瀏覽器,這個版本相較於 Internet Explorer 7 又更加遵循 W3C 所制訂的各式網頁標準,例如 CSS 2.1、標準的 DOM 支援、HTML 4.01 與 XHTML 1.0 標準、通過 ACID2 標準網頁測試等等。除此之外,在這個版本還正式提供了許多更多與不同的 Internet Explorer 瀏覽器版本之間的相容性技術,並同時支援 Internet Explorer 7 標準檢視、Internet Explorer 8 標準模式、Internet Explorer 8 相容性檢視等不同的瀏覽器模式,以助於網頁設計師與 Web 開發人員能夠利用這些相容性開發技術進行網頁設計與測試,好讓同樣的網頁能夠在不同版本的瀏覽器之間能有一致的瀏覽體驗。


Internet Explorer 8 的網頁顯示引擎與支援的標準

Internet Explorer 8 同時提供 IE7 與 IE8 網頁顯示引擎,也代表著你在使用 Internet Explorer 8 瀏覽器瀏覽網頁時,除了可以使用 Internet Explorer 8 的網頁顯示引擎外,甚至可以模擬出 Internet Explorer 7 瀏覽器在顯示網頁時的狀況,這部分是 Internet Explorer 瀏覽器很大的一個改進,對開發人員來說也是一大福音。

而在 Internet Explorer 8 推出時,對 CSS 2.1 (目前 W3C 主流版本) 支援度是業界最高的,其遵循的項目包括有:

  • 遵循 CSS 2.1 的標準
  • 遵循 DOM 標準
  • 遵循 W3C HTML 標準
  • 遵循 ACID2 測試標準

透過這些標準的遵循,也代表著網頁設計師或 Web 開發人員也可以參照一個業界公認的標準 (W3C) 來進行網頁設計了,以下是與 IE 相容性的相關連結:

  • Windows Internet Explorer Testing Center
  • IE6、IE7、IE8 對 CSS 2.1 的支援語法一覽表
  • Internet Explorer 相容性中心
  • Internet Explorer 8 Readiness Toolkit

Internet Explorer 8 支援的瀏覽器模式與文件模式

我們已經知道 Internet Explorer 8 同時提供 Internet Explorer 7 標準檢視、Internet Explorer 8 標準模式、Internet Explorer 8 相容性檢視等不同的瀏覽器模式(註:你可按下 F12 開啟開發者工具進行切換):

除了可以讓你選擇要顯示網頁的網頁顯示引擎外,還能指定所謂的「文件模式」,讓使用者可以指定要以什麼方式來呈現網頁,這部分在 Internet Explorer 7 與 Internet Explorer 8 各有不同的支援模式,分別描述如下:

Internet Explorer 8 的文件模式有三種,分別是:

  • Quirks 模式
  • Internet Explorer 7 標準
  • Internet Explorer 8 標準

Internet Explorer 7 的文件模式則只有兩種如下:

  • 1. Quirks 模式
  • 2. IE7 模式


關於 Internet Explorer 8 的 User Agent 字串

由於我們在 Internet Explorer 8 裡可以指定不同的瀏覽器模式, 因此網頁開發人員就可能需要能夠判斷出使用者到底用什麼瀏覽器進行瀏覽,以下是在 Internet Explorer 8 切換不同瀏覽器模式的情況下所送出的 User-Agent 字串:

IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; )

IE8

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0)

IE8相容性檢視

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0)

補充說明:如使用 Internet Explorer 9 瀏覽器可參考以下 User-Agent 字串:

IE9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

IE9相容性檢視

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0)


Internet Explorer 8 瀏覽器支援的相容性技術

我們早期所開發的網頁若是針對 Internet Explorer 7 所設計的,那麼當使用者採用 Internet Explorer 8 瀏覽器進行瀏覽時很有可能會遇到相容性的問題,這種情況 Internet Explorer 8 提供了一些相容性的技術可幫助使用者或 Web 開發人員能快速解決不同瀏覽器間的相容性問題。

在 Internet Explorer 8 瀏覽器支援兩種不同的機制能讓瀏覽器選擇適合的網頁顯示引擎,一方面可以讓瀏覽器的使用者指定瀏覽器的版本,另一方面可以讓開發人員透過 Meta Tag 或 HTTP Header 告訴 Internet Explorer 8 瀏覽器應該使用何種瀏覽器模式呈現網頁。

由使用者決定瀏覽器模式

使用者在瀏覽網站的時候,若發現網頁並不適合以 Internet Explorer 8 瀏覽器進行瀏覽,這時就可以透過相容性檢視(Compatibility View) 的方式讓網頁重新改以 Internet Explorer 8 相容性檢視 的方式進行網頁瀏覽,如下圖示,你可以透過 [網頁] / [相容性檢視] 的方式切換進入,或是直接點選網址列旁編的圖示進入 Internet Explorer 8 相容性檢視 這個瀏覽器模式。

這時如果你有開啟開發人員工具的話,就可以看到瀏覽器模式會自動從 IE8 切換至 IE8 相容性檢視:

除了可以這樣手動切換外,你也可以透過 Internet Explorer 8 的 “相容性檢視設定” 功能設定特定網站網址是否要改以 Internet Explorer 8 相容性檢視 的方式進行顯示網頁:

透過 [相容性檢視設定] 的對話框,你可以將一些已知有相容性問題的網站網址逐一加入自訂的清單中,該對話框最後的三個選項可以讓你設定一些顯示的規則,其中第一個選項是「包含來自 Microsoft 的更新網站清單」,由微軟幫你整理一份已某些知名網站但有 Internet Explorer 8 相容性問題的網址清單,而這些清單定時都會透過 Windows Update 自動更新。

由開發人員決定瀏覽器模式

身為 Web 開發人員都知道,要教育使用者去點擊一個 相容性檢視 的按鈕是非常困難的事,如果是在公司內部的 Intranet 網站倒是還好,但若你的網站服務對象是廣大的 Internet 使用者時那就不可能一一教育使用者去設定相容性檢視了。

還好 Internet Explorer 8 也有提供開發人員一個相容性機制,可以透過網頁 Meta Tag 或透過 HTTP Header 告知使用者的 Internet Explorer 8 瀏覽器應該如何顯示你所開發的網頁,這樣一來使用者就不需要先被告知應該要用什麼瀏覽器模式進行切換,也徹底化解不同瀏覽器之間的相容問題。

依照頁面進行規劃設定

這方式可以套用在「特定頁面」中,是以「頁面」為基礎的調整,你只要在 <head> 與 </head> 之間加入以下這行 Meta Tag 即可套用完成:

  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

但有一點必須特別注意,這一行 Meta Tag 的宣告必須出現在 <head> ... </head> 之中,而且 <head> 一定要出現在 <body> 之前,才會正確套用 Internet Explorer 8 相容性檢視,例如:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  6. </head>
  7. <body>
  8. <h1>TEST</h1>
  9. </body>
  10. </html>

依照網站進行規劃設定

如果你的整個網站都需要做出相同的設定,更為簡易的作法是直接調整 IIS 的設定,若以設定 IIS6 為例,你可以在 網際網路資訊服務(IIS)管理員 中,在站台中新增一個自訂的 HTTP 標頭名為 X-UA-Compatible,並且將值設定為 IE=EmulateIE7 即可完成全站設定,設定的示意圖如下:

如果是 IIS7 的話,則可參考以下圖示進行設定:

或者,可以直接修改 web.config 的設定:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <configuration>
  3. <system.webServer>
  4. <httpProtocol>
  5. <customHeaders>
  6. <add name="X-UA-Compatible" value="IE=EmulateIE7" />
  7. </customHeaders>
  8. </httpProtocol>
  9. </system.webServer>
  10. </configuration>

結語

在瞭解 Internet Explorer 8 相容性技術之後,相信各位對於 Internet Explorer 8 瀏覽器所支援的相容性技術有了基本的瞭解,有了這些觀念與技巧後,更能夠讓使用者與 Web 開發人員或程式設計師更能快速的讓現有的網站適應 Internet Explorer 8 瀏覽器的執行環境。

转载于:https://www.cnblogs.com/Nina-piaoye/archive/2012/11/14/2769374.html

邊做邊學 Internet Explorer 8:瞭解 IE8 相容性技術相关推荐

  1. Internet Explorer 8 Beta2 常见问题解答

    Internet Explorer 8 Beta2 常见问题解答<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:o ...

  2. vs2008与IIS 7.0使用在vista上时出现的问题及解决方法(Internet Explorer 无法显示该页面)(VS2008: IE Cannot Display Web Page)...

    我的系统是Vista Ultimate SP1,先安装了vs2008 ,然后再安装了IIS7.0之后就出现了一系列的问题. 问题:通过vs2008启动程序调试时报错.错误提示为:Internet Ex ...

  3. Internet Explorer 8 Beta 2十大看点

    Internet Explorer,即我们常说的IE浏览器,从诞生伊始到现在已经经历了十余年,从功能简单的Internet Explorer 1到功能强大的Internet Explorer 7,In ...

  4. 如何使用BHO定制你的Internet Explorer浏览器

    原文出处:Browser Helper Objects: The Browser the Way You Want It 一.简介 有时,你可能需要一个定制版本的浏览器.在这种情况下,你可以自由地把一 ...

  5. 使用CEOP增强的Internet Explorer 8帮助保护您的孩子

    Do you want to make Internet Explorer safer and more helpful for you and family? Then join us as we ...

  6. 如何从Internet Explorer或Edge迁移到Chrome(以及为什么要迁移)

    Google's Chrome web browser is now more widely used than Microsoft's Internet Explorer and Edge comb ...

  7. “Internet Explorer无法打开站点,已终止操作”解决

    "Internet Explorer无法打开站点,已终止操作"解决 做开发什么事情都会遇到 但是你要学会解决 就是跟别人学系解决办法的思想 本来是用jquery封装了一个控件类 没 ...

  8. 把应用程序从 Internet Explorer 迁移到 Mozilla

    把应用程序从 Internet Explorer 迁移到 Mozilla 如何让依赖于 Internet Explorer 的 Web 应用程序在基于 Mozilla 的浏览器上运行 Doron Ro ...

  9. Internet Explorer 7 功能

    Internet Explorer 7 功能浏览以下功能,以了解在 Internet Explorer 7 中对易用性.安全性和开发平台所做的改进. 使日常工作更容易 Internet Explore ...

最新文章

  1. 北京大学崔斌教授组招收图机器学习、AutoML等方向科研实习生
  2. TCP/IP报文格式
  3. oracle中右击出现的含义,Oracle中经典的问题解决方案-Oracle
  4. python爬虫scrapy安装_零基础写python爬虫之爬虫框架Scrapy安装配置
  5. ThreadLocal的重要方法介绍
  6. linux 提供多用户telnet,linux系统telnet命令怎么用
  7. 布朗桥python_MATLAB 里面有哪些加快程序运行速度的方法呢,求分享?
  8. Linux之rm命令
  9. ffmpeg drawtext 背景_8款电视背景墙:电视背景墙这样装,不仅省钱还作用多!效果大不一样!...
  10. 妈耶,摆脱机器音,二次宅的歌姬女友彻底活了
  11. Epicor 调试 customization
  12. html5微课程制作,翟猛老师《微课开发及制作-基于H5课件制作模式》
  13. VS中更改exe程序图标
  14. 企业电子招投标采购系统源码之电子招标采购是管理复杂供应链和多层供应商的高效方式
  15. 站内搜索 迅搜xunsearch 中小型网站的福音
  16. 控制理论中的稳定性总结
  17. Flink SQL和Table编程和案例
  18. android 权威编程指南 笔记 2018-09-01
  19. Excel表格如何输出为清晰图片
  20. aircrack-ng破解wifi密码

热门文章

  1. PHPUNIT 单元测试
  2. Confluence 6 使用 Apache 和 mod_proxy 添加 SSL和其他
  3. PHP正则表达式怎么匹配多行
  4. 《大数据、小数据、无数据:网络世界的数据学术》一 3.4 开放学术
  5. c++性能之对象与指针性能比较、以及java与c++性能对比实测
  6. Linux USB驱动框架分析 【转】
  7. Spring框架笔记(二十二)——切点表达式的重用
  8. CentOS6虚拟机下面配置双网卡
  9. tail实时监控日志qps
  10. 监听列表事件的监控核心技术(编写代码)