小竹的小小理想屋: 10/01/2008

昨天搞了一個晚上就是要讓網頁支援 IE6！除了花大筆的時間之外，也不斷重覆著 display:inline, _height:0 又或是 zoom:100 (乃威建議的)，真是辛苦了。現在的工具都太新了，從生產到測試都是最新版，但話說回來，舊的東西也不能不顧，真是痛苦的人生呀！(案編：還是快躲進理想屋裡頭!)

首先當網站不支援 IE6 的時候要怎麼辨？
方法1. 告訴使用者：不行了？
IE6 blocker script 是使用 CSS position: fixed 把背景黑掉引起使用者注意的東西。
當然因為是容易的東西，IE6 不支援 position: fixed 因此，還是不支援 =_= ，儘管是 javascript，用起來卻像是 position: absolute 的效果，沒有針對操作上的 scroll-down 情形，結果來說並不是很好看，也不算是好方法。

方法2. 把它修好：當然啦，不是一般的苦力就行的
網路是一個很方便的東西，可惜它並不會教人們如何思考。我還是只說我的心得吧！
就請讀者試過之後，再來交換一下心得吧！

心得1. float:left/right 會有傳說中的 double margin bug,
加一行 _display:inline 即可修正。有兩的以上的 floating 在一起的時候，就必須要修
(不要因為看起來沒事就不修，它們還是會互相影響！)

心得2. float:left/right 的東西如果有 wrapper(就是大 div 將他們包起來的話)，可使用 overflow:hidden (IE7), 或 _height:100% (IE6), 或 elementnameXxx:after { content " "; clear:both; }

心得2.1 使用_height:100% (IE6) 的修法的話：
如果有 padding 的話，用 height:100% 會看不到下面的 padding/border 相當麻煩，只能用 javascript修改 height 或多一個 dummy container with style { clear:both } 放在下面，就會包的很漂亮。建議使用後面的方法

心得2.2 使用overflow:hidden (IE7) 的修法的話：
注意 ajax 配合使用上的問題，overflow:hidden 的層上如果疊上另一層邊邊會被消掉

心得2.3 使用elementnameXxx:after { content " "; clear:both; } 的修法的話：
目前沒有試成功耶，你們真的有試成功嗎？這只是我自己猜想出的修法而己，理念上是對的

心得3. 如果有一個 wrapper，它有 background-image 的 style, 而 children 裡面的東西沒有任何的 float:left/right containers, 那麼就應該用 _height: 0; 來代替心得2 的例子。原因是 IE6 不管怎麼樣都會把外包的 wrapper 撐大，使用 _height: 100% 也有同樣的結果，這裡特別說明是因為 height: 0 居然可以在設特例下使用，非常好玩！

心得4. 關於透明 png 的支援，恐怕是最難解決的問題，如果只是 img 又或 background-image 皆可使用 IE6 的 filter 解決。先決條件就是會有 z-index 問題，所以上面幾乎不能疊東西，用 png 做 button 可算是自殺式行為。

心得5. 使用 Browser-Specific selectors

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Recent Opera versions 9 and below

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

但是有可能，真的很可能，你不會需要這些 selectors, 因為專門給 IE 用的版本

.classname {
background: #fff; /* all browsers including Mac IE */
*background: #fff; /* IE 7 and below */
_background: #fff; /* IE 6 and below */
_bac\kground: #fff; /* IE 6 only */
}