家儒的筆記 » IE6

常用 CSS Hack 再整理

kayue — Sat, 26 Jun 2010 19:11:11 +0000

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。

CSS Hack

IE hacks

雖然 IE 對 CSS 的支援不堪入目，可是卻有方便的屬性 hacks！把下列 hacks 記下來即可輕鬆應付各版本的 IE！

.selector {
    padding: 10px;
    padding: 9px\9; /* all ie */
    padding: 8px\0; /* ie8-9 */
   *padding: 5px;   /* ie6-7 */
   +padding: 7px;   /* ie7 */
   _padding: 6px;   /* ie6 */
}

Firefox hacks

/* Target Firefox 2 and older */
body:empty .selector {
    color: red; 
}
/* Target FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default {
    color: red;
}

來源：CSS Hacks for Different Versions of Firefox

WebKit hacks

針對 Chrome 和 Safari 的 hack

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector { padding:11px; }
}

Javascript

Javascript 的解決方案都不外乎先在 Javascript 做版本檢測，之後在 html 或 body 上加上相應的 class。這樣做的好處是不用在 css 裡加入各種奇形怪狀的 hack，也不用處理日後 css hack 的相容性問題。缺點是它要依賴 Javascript，反應也可能比較慢…

jQuery

這一段 code 可以自動在 body tag 上加入 IE6 class

if( jQuery.browser.msie && parseInt(jQuery.browser.version) === 6 ) {
    $("body").addClass("ie6");
}

請各位自行舉一反三，詳情請閱 http://api.jquery.com/jQuery.browser/

Modernizr

如果你常常在網站上用到 CSS3 的話，又同時要支援舊瀏覽器，Modernizr 可能對你有用。Modernizr 會就瀏覽器支援的 css3 屬性在加入相應的 class。

例如我想用多背景圖的話：

.multiplebgs div p {
    /* properties for browsers that support multiple backgrounds */
}
.no-multiplebgs div p {
    /* optional fallback properties for browsers that don't */
}

更多例子請見 http://www.modernizr.com/docs/。雖然我覺得這樣做有點多餘啦，如果要完美支援舊時代瀏覽器的話不如直接放棄 CSS3 好了。

HTML Conditional Comments

最近我還學到了這種不用 Javascript 而又可以在加 class 的寫法：

<body  class="ie6">
<body class="ie7">
<body class="ie8">
<body class="ie9">
<body class="non-ie">

很好很強大，長得醜一點就是了。

Internet Explorer 6 Bugs

kayue — Fri, 11 Dec 2009 11:33:49 +0000

每參與一個新 project，我總會第一時間問用不用支援 Internet Explorer 6，答不用支援的一般都是不憂財源的公司。所幸某公司一直沒有支援 IE6 的傳統，加上自從轉用了 Mac 以後，開 IE 變得很不方便，已經很久沒 debug IE 了。

最近看見有人寫了篇 IE6 bug 大全，整理收集了一堆 IE6 bugs。其實要找 IE CSS bugs ，我推薦一個好地方：Explorer Exposed 。這個網站收集了很多常見的 IE CSS bugs 及其解法（不限 IE6），對工作極有幫助。另外，在《Ultimate IE6 Cheatsheet》這篇帖子裡，也介紹了多種方法去補足 IE6 功能上的缺陷，例如半透明的 png、圓角等。

老實說，不提複雜一點的 floating、positioning ，Microsoft 要怎樣寫才能寫出 double margin 這些不合邏輯的 bugs 呢？與其說 bugs，倒不如說是瘟疫更為貼切。

不知道當年的 IE6 developers 敢不敢在自己的 resume 上寫自己曾經開發過 IE6 呢? XD

PS: 有人會為 IE 8 debug 嗎？還是都是強行轉成 IE7 算了？

上圖出自：IE6 denial message for Momentile.com

荒謬的 Expression Web SuperPreview

kayue — Fri, 20 Mar 2009 04:10:35 +0000

滿心歡喜的下載了剛推出的 Internet Explorer 8.0，安裝後發現原本測試用的 IE6 和 IE 7 都不能正常運作！我試過了 standalone version 和 IETester 均告無效。最網上搜尋一下後發現，原來 Microsoft 自家也有一套工具 Microsoft Expression Web SuperPreview，正是用以測試 IE6 和 IE 7 的。

最經典的地方來了，這套 Expression Web SuperPreview 居然 tmd 的一套收費軟件！！無恥到令人難以置信的地步吧？明明是自己搞出來的爛攤子，居然還好意思要跟別人收費。

除此以外，Window 7 的用戶是無法用它來測試 IE 6，廣大的 Web developer 們準備用 XP 直至天荒地老 IE 6 滅亡吧！如果 Window 7 是預載 IE8 的話，可能連 IE7 也無法測試，因為網站上寫著 Internet Explorer 7 (if previously installed)。

各位讀者不用傷心，經過家儒試用後，發覺這套 Expression Web SuperPreview 真的只是 preview only，只能用以 view 而不能做出任何動作，包括 javascript，甚至連超連結也不可用。換言之這只不過是一個 screen shot 而已，跟本不是 IETester 的代用品。SuperPreview 唯一好處是它的位置比較功能（下圖），能夠準確比較兩個頁面同一 element 的位置有何不同。不過相信世上已經再沒有這麼執著的 web designer 了。

Expression Web SuperPreview 目前公測中，本年（2009）十月前大家都可放心使用。

下載點：SuperPreview_Trial_en.exe (Download Size: 250.4 MB Orz….)。