CSS for FX, IE6, IE7

話說,自己學習 CSS 搞頁面。原本大都搞定,但在某天看到這一篇報導:

"【分享】盜版Windows也可升級微軟IE 7":http://www.gsg9.tw/showthread.php?t=380

為了推廣新版瀏覽器IE 7,微軟宣佈開放IE 7下載,而且不需經過Windows Genuine Advantage的正版視窗系統檢驗程序,也就是說盜版的用戶也可升級IE7。

哇哩咧...我在搞 CSS 時,只用 FX 和 IE6 來預覽,完全沒有理會 ie7 的存在。心想市場普遍不看好 IE7,多數用戶也無法升級(嘿~)。現在可好了,微軟大發慈悲讓所有 Windows 的使用者升級為 IE7,我不得不拿 IE7 來預覽我做的頁面。畢竟,我的專案還有一段時間才會上線,這段時間 IE7 必定會透過 Windows 的自動更新大肆攻佔使用者的電腦。

雖然,工程師跟我說 IE6 的問題很多,但我實在不想裝 IE7,況且我現在都用 FX 上網瀏覽,何必再去裝一個大而無當的瀏覽器?

上網搜尋了一下,發現有這麼一篇文章:

"IE6之下獨立安裝IE7":http://jas9.blogspot.com/2007/01/ie6ie7.html

照著步驟,我成功安裝了陽春版的 IE7。反正我也是要看頁面呈現而已,IE7 再怎麼強大,也不會比 FX 好用(我被洗腦了)。我開了 IE7 來瀏覽我的專案頁面,80% 的頁面還算正常,但是剩下 20% 的頁面慘不忍賭,心裡也直發毛...外行的我又要搞 CSS 了 =_=|||

一開始,邊改 CSS 邊用三種瀏覽器(FX, IE6, IE7)來預覽,修正一處是一處,但心裡總覺得很悶、很無奈。上網又找到這一篇文章:

"CSS 於IE6、IE7、Firefox間的兼容hack":http://blog.pixnet.net/ezcshi/post/13325989

於是大家還可以這樣來區分IE6,IE7,firefox:

FF → background:orange;
IE7→ *background:green;
IE6→ _background:blue;

註:不管是什麼方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在最後面。

我照著這個奇技淫巧(hack)試了一下,靠~ 有用耶!於是把所有原本 for IE6 only 的 hack,都在上面多加一行 for IE7 only 的 hack,解決了絕大多數 IE7 會出搥的地方。

雖然,還是有一些地方,必須專門為了 IE7 做調整,但如果沒有上述的祕技,我想我可能會邊做邊哭,模樣很難看的。

邊做邊哭模擬照片

啊... IE8 別那麼快出來...

■ 延伸閱讀:

* IE 6、7共存:如果已升級為 IE7,也可以加 multiple-ie 這個軟體來緬懷 IE3~IE6。
* "CSS解決未知高度垂直居中的問題":http://220.135.241.51/blog/article.asp?id=1214 :vertical-align 並不能有效解決未知高度的垂直居中問題
* "Vertical Centering in CSS":http://www.jakpsatweb.cz/css/css-vertical-center-solution.html :讓文字/圖片垂直居中