網頁制作poluoluo文章簡介:在討論IE6的BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然 。
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻譯:http://www.vfresh.org/w3c/727(譯文對原文進行了補充)
在討論IE6的BUG及如何修復之前,有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然 。
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的用戶。運用漸進增強策略,可以保證讓那些用戶至少使用到你網站(或網絡應用)的基本功能。
更多漸進增強的資料:
使用自己的預設樣式(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:
使用JavaScript框架
如果你的網站使用了較多的JavaScript特效,建議使用JavaScript框架。大部分的js框架都兼容了包括IE6在內的各種浏覽器。可選的框架有很多,但一般能用一種框架實現的效果一定可以用另外一種框架實現,所以你可以根據個人喜好來選擇合適的框架。
以下是一些常用的JavaScript框架:
強烈推薦實用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天。