IE6的BUG及修復 謂防患於未然的策略_HTML/Xhtml_網頁製作

PHP中文网
發布: 2016-05-16 16:42:03
原創
1304 人瀏覽過

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

原文:Ultimate IE6 Cheatsheet: How To Fix 25 Internet Explorer 6 Bugs
翻譯://m.sbmmt.com/(譯文對原文進行了補充)

在討論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], 或 [i]XHTML 1.1

HTML 5

HTML 4.01 Strict

PUBL W3C//DTD HTML 4.01//EN" "//m.sbmmt.com/">

HTML 4.01 Frameset

HTML 4.01 Frameset

HTML 4.01 Transitional

XHTML 1.0 Strict

XHTML 1.0 FramesetXHTML 1.0 Frameset

XHTML 1.0 Frameset

XHTML 1.0 Frameset

XHTML 1.0 Transitional

XHTML 1.1


olor:#006da3">//m.sbmmt.com/">

驗證你的程式碼

我曾聽過有些人認為校驗程式碼沒有任何實用價值,但我不這麼認為。校驗僅只需花費一點點時間,而且將受益於所有瀏覽器而非僅僅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 CSSProgressive 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可供參考。

簡單CSS Reset範例:

body,p,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

  • ISS CSS Reset

使用JavaScript框架

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

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

  • MooTools

  • ProtoType

    with Scriptaculous

  • Do >

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

使用JavaScript模擬標準瀏覽器

現在有一些JavaScript來使IE模擬標準瀏覽器,如果你有較高比例的用戶使用IE6並且開啟了JavaScript ,可以考慮使用Dean Edwards

IE7 或類似的腳本。 譯者註:不建議使用這些腳本,因為這些「模擬」的實作往往會消耗大量的資源,IE本來就夠爛了。
如何在IE下調試頁面

在IE下調試頁面很麻煩,Firefox下的擴充程式Fire

bug

Web Developer Toolbar 都是很好用的工具,如果你想在IE或其他瀏覽器上使用firebug,可以用Firebug Lite。 在IE下有兩種最好的調試方法:IE Collection
IETester,而且都是免費的(雖然有一點點缺陷)。 IETester的開發者也提供了 DebugBar 這款IE外掛程式免費供個人使用,但商業用戶只可試用60天。  以上是IE6的BUG及修復 謂防患於未然的策略_HTML/Xhtml_網頁製作的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


相關標籤:
ie6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板