DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> IE6的BUG及修復:謂防患於未然的策略
IE6的BUG及修復:謂防患於未然的策略
編輯:HTML和Xhtml     

網頁制作poluoluo文章簡介:在討論IE6的BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然 。

原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻譯:http://www.vfresh.org/w3c/727(譯文對原文進行了補充)

在討論IE6BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然 。

IE6 市場占有率

據Market Share統計,目前(2009年8月)IE6 的市場占有率為25.25%,但是其他地方的統計明顯要低,為18.1%;盡管統計結果不同,但都呈現出了下降的趨勢(翻譯此文時,淘寶的IE6用戶已從70%跌破至69%)。但是最重要的,還是你自己網站的統計數據。如果你對你的網站進行了流量分析,那麼IE6的占有率是否值得你去針對IE6進行開發?這需要你自己去權衡。

如果你網站絕大部分訪問者不使用IE6並且不付費給你,那麼你不必特意區針對IE6做兼容,從而節省時間、精力及資金。

做一個簡潔的設計

在做設計的同時考慮代碼的實現,可以避免一些布局上的問題。再復雜的設計稿也能用簡潔的代碼實現,如果你使用了過於繁冗的標簽,那麼你需要重新修繕設計稿。
如果你有豐富的開發經歷,攻克過很多種布局難題,記錄下你的解決方案,在以後碰到相同問題時可以提高開發效率。

使用合適的文檔申明(doctype)

使用一個錯誤的文檔聲明會觸發quirks mode(怪異模式),正確的文檔聲明可以保證你的頁面在所有浏覽器下保持一致的效果。使用其中的一個文檔申明:HTML 5[/i], [i]HTML 4.01 Strict[/i], [i]HTML 4.01 Frameset[/i], [i]HTML 4.01 Transitional[/i], [i]XHTML 1.0 Strict[/i], [i]XHTML 1.0 Frameset[/i], [i]XHTML 1.0 Transitional[/i], or [i]XHTML 1.1

HTML 5

<!DOCTYPE HTML>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

網頁制作poluoluo文章簡介:在討論IE6的BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然 。

驗證你的代碼

我曾聽說過有些人認為校驗代碼沒有任何實用價值,但我不這麼認為。校驗僅僅只需花費一點點時間,而且將受益於所有浏覽器而非僅僅IE6;驗證確保了向後兼容並且易於維護。至少也得驗證XHTML!唯一可以忽略驗證的情況是在你打算使用CSS3時。
你可以使用w3提供的工具 驗證XHTML / 驗證CSS

先對標准浏覽器進行兼容

在寫代碼的過程中,一開始在標准浏覽器中測試(如 Firefox, Opera, Chrome等),然後再去測試非標准浏覽器(如IE6/IE7),因為這些標准浏覽器都遵循w3c標准,大多的處理方式都相同。你可以分開來單獨去兼容“特別”的IE浏覽器,這樣做能規范你的代碼,你將會因此擁有扎實的基礎;而且如果你不再需要兼容這些非標准浏覽器,你可以一次性刪除這些修復兼容性代碼。

漸進增強(Progressive Enhancement)

漸進增強(Progressive Enhancement)是為了確保沒有頁面特效後基本功能也是可用的。簡單來講,漸進增強是指在確保頁面在禁用JavaScript後能正常運作後,再對頁面添加各種特效(JavaScript動畫、Ajax異步等等)。我們同樣可以運用“漸進增強”原則來使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web規范。
某些情況下,是無法讓所有用戶在任何浏覽器下都完全一模一樣,特別是那些使用IE6的用戶。運用漸進增強策略,可以保證讓那些用戶至少使用到你網站(或網絡應用)的基本功能。

更多漸進增強的資料

  • 理解漸進增強(譯文)
  • Understanding Progressive Enhancement
  • Progressive Enhancement With CSS
  • Progressive Enhancement: What It Is, And How To Use It?
  • Graceful Degradation vs. Progressive Enhancement
  • Pragmatic Progressive Enhancement - Why You Should Bother With It

使用自己的預設樣式(CSS Reset)

每個浏覽器都有各自不同的預設樣式,在你的樣式表之前使用預設樣式(CSS Reset)可以避免在之後編寫冗長的浏覽器兼容樣式。在網上有很多CSS Reset可供參考。

簡單CSS Reset示例:

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,
th,td {margin:0;padding:0;}

一些可供參考的CSS Resets

  • YUI CSS Reset
  • Eric Meyer's Reset Reloaded
  • KISSY CSS Reset

使用JavaScript框架

如果你的網站使用了較多的JavaScript特效,建議使用JavaScript框架。大部分的js框架都兼容了包括IE6在內的各種浏覽器。可選的框架有很多,但一般能用一種框架實現的效果一定可以用另外一種框架實現,所以你可以根據個人喜好來選擇合適的框架。

以下是一些常用的JavaScript框架:

  • MooTools
  • jQuery
  • ProtoType with Scriptaculous
  • Dojo
  • Ext JS

強烈推薦實用MooTools,但如果你是入門者,還是建議使用jQuery。

使用JavaScript模擬標准浏覽器

現在有一些JavaScript來使IE模擬標准浏覽器,如果你有較高比例的用戶使用IE6並且開啟了JavaScript,可以考慮使用 Dean Edwards 的 IE7 或者類似的腳本。
<small>譯者注:不建議使用這些腳本,因為這些“模擬”的實現往往會消耗大量的資源,IE本來就夠爛了。</small>

如何在IE下調試頁面

在IE下調試頁面很麻煩,Firefox下的擴展程序 Firebug 和 Web Developer Toolbar 都是很好用的工具,如果你想在IE或其他浏覽器上使用firebug,可以用Firebug Lite。
在IE下有兩種最好的調試方法:IE Collection 和 IETester,並且都是免費的(雖然有一點點缺陷)。IETester的開發者也提供了 DebugBar 這款IE插件免費供個人使用,但商業用戶只可試用60天。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved