Skip to content

IE 6版面問題

2009/06/27

「這個mockup是我們這次UI改版的版型……@#%^&*」motorcycle咧~~~~暗!

每次聽到這句話,心中那股無名火又會熊熊燃起。改UI對我們真的是大的折磨,想到要讓layout在眾多的瀏覽器都能正常運作,真的就一個頭兩個大。各家瀏覽器對於HTML, scripting, CSS支援實作的方式都不盡相同,也造成原本應該是放諸四海皆準的統一規格,變的是四分五裂、四零八落、四不像的怪模樣。特別是IE 6,以其獨樹一格、獨一無二的實作方式,讓我為它的獨特性犧牲了許多無辜的青春歲月,因此,網路上有許許多多的活動來抵制這萬惡的根源(NO IE6)

面對這個棘手的問題,一般的解決方式有下列三種

  • CSS Hack
    這個方式應該是最簡單的,在不修改HTML頁面的條件下,針對破掉的版面分別設定相關的CSS設定。例如:IE 6的boxing model就是曾讓我很苦惱的問題@@,IE 6在設定元件的寬度時跟其他的瀏覽器是不一致的,導致版面常因此而破掉,所以要特地為此給定不同的CSS設定。要如何達到呢?只要在CSS設定前多加一個底線(_)就產生IE 6的專屬設定了。但是要記得寫在正常設定之後,也就是要覆寫它。
    #css_selector
    width: 100px;    // 讓一般的瀏覽器來讀取的設定
    _width: 90px;    // 覆寫一般的設定,IE 6會讀取這個設定,其他的瀏覽器則會bypass
    }
  • Conditional comments
    這個方法則是針對會出問題的HTML元件,撰寫專屬的HTML碼 。要怎麼做到呢?可以參考這裡
  •       <!--[if IE 6]>
          放入專門給IE 6解讀的HTML
          <![endif]-->
  • 不要支援IE 6了

除了這個問題以外,在撰寫HTML頁面的時候也要注意DOCTYPE的設定,在HTML的最開始宣告DOCTYPE,告訴瀏覽器該用什麼模式來處理CSS, HTML, Scripting
一般而言,可以分成下列四種模式

  • Quirk Mode
  • Standard Mode
  • Almost Standard Mode
  • IE 7 Mode

詳細的說明可以參考這邊。不過基本上可以粗分成兩種類型Quirk mode, Non-quirk mode,所謂的Quirk mode就是告訴瀏覽器用舊的方式來render HTML, CSS等網頁元件,Non-quirk mode就是用符合現代規格的spec定義的方式來產生相關元件。至於如何在這些模式中切換可以參考下列表格(from: http://hsivonen.iki.fi/doctype/)

octype NS6 Old Moz Moz &
Safari &
Opera 10
& HTML5
Opera 9.0 IE 8 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2
None Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> S S S S S A A Q A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> S S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> Q S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Q Q Q Q A A A A Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> S S A A A A A A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A A A Q A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> Q S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> Q S S S S A A A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> S S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> S S S S S A A A Q
<!DOCTYPE html> Q S S S S A A A
Advertisements
One Comment leave one →
  1. 2009/08/02 5:47 下午

    收錄來串文。^_^

    聯合抵制IE6 請升級或更新瀏覽器
    http://blog.joytown.tw/2009/07/31/531

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: