10/12/2008

幫舊版IE升級到IE7或IE8的方式

最近瀏覽器的爭戰越來越激烈, 6月有 Firefox 3 和 Opera 9.5 版的發佈, 9月有 Google Chrome Beta 版發佈, IE8 正式版要在11月發佈, 中文正式版大約晚2個月, 預計明年初發佈.

Netscape 在不久前才表示不再發佈更新版本的瀏覽器, 等於宣告Netscape 將走入歷史, 但是又出現一個全新的 Google Chrome. 以 Google 的用戶數來看, 也是不容忽視的瀏覽器. 想必 Goolge 要藉由開發自家瀏覽器做更多Web應用和服務.

網頁設計師過去一直為不同的瀏覽器修改畫面呈現的問題(因為各家瀏覽器的開發缺乏標準), 瀏覽器版本越多就越麻煩. 但是拜 W3C 之賜, 這幾年強力推行 Web Standard, 原來只有 Firefox 遵行, 現在 IE8 也標榜支援 Web Standard 和通過 Acid2 檢測. Acid2 是檢驗瀏覽器對 Web Standard 的HTML、CSS 2.0、PNG圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Opera Mobile 行動裝置版, Firefox 3, IE 8 和 Chrome , 所以未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.

但是如果還要顧慮 IE5 和 IE5.5 甚至 IE6 不怎麼完整的 CSS2 支援性, Dean Edwards 的 IE7.js Version 就很好用了, 藉由在 <head> 連結一支 js 檔將舊版 IE 轉變成 IE7 或 IE8 所支援的CSS2 selectors 的方法.

例如要將 IE5~6 升級到 IE7, 可在 <head> 加上以下的 code:
<!--[if lt IE 7] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-- >


例如要將 IE5~7 升級到 IE8, 可在加上以下的 code:
<!--[if lt IE 8] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-- >


也可將這支 js 下載回來使用 http://ie7-js.googlecode.com/svn/version/2.0(beta3)/

但是這支 js 檔到底為 IE5~6 加入哪些新東西呢? 以下CSS2的用法將會通通支援:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()


再加上支援 Doctype 標準模式 (Standard Mode) 和相容模式 (Quirks Mode) 的切換, 支援 fixed positioning (固定位置設定), min/max-width/height ( 最大最小寬度高度設定), 支援 PNG 透明圖檔等.

更完整支援內容請參考以下網址:
http://dean.edwards.name/IE7/
http://ie7-js.googlecode.com/svn/test/index.html

要幫 IE5, IE5.5 和 IE6 升級到 IE7 或 IE8 版本, 這方法一定要試一試!

3 則留言:

瓦特比 提到...

除了"IE7.js"、"IE8.js"之外,還有"ie7-recalc.js"以及"ie7-squish.js"是做什麼用的?

Jane 提到...

ie7-recalc.js
讓網頁可以使用 document.recalc() 的
dhtml 語法

ie7-squish.js
修復一些 bug, http://ie7-js.googlecode.com/svn/test/index.html
所列的 "Other Bug Fixes" 項目

milazi.com 提到...

这太神奇啦