Internet Explorer 6 SUCK !!

What the fuck, ie6 問題真的有夠多, 都不照 W3C 的規範走, 用它來瀏覽常有莫名其妙的東西出現, 為了抓這些奇奇怪怪的蟲子, 浪費了我很多的生命, M$ 真是造孽. 列出幾個這幾天碰到的問題. 請大家務必愛用 firefox 啊 ...

1. 如果 div 同時設定 float 和 margin, pixel 會加倍, 10px 變成 20px. 必須透過加上 display:inline; 來修正.
   
#IamFloat{
float:left;
margin:10px;
display:inline;}

< #div id="imfloat">
2. 文字 or 圖片常度過寬未手動斷行, 整個 layout 爆炸, 於 main-wrapper 或是 sidebar-wrapper 的 css 加入 word-wrap 還有 overflow 的參數來修正.
   
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
....... }

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
........ }
3. 圖檔為 png 格式的透明背景在 ie6 無法正常顯示, 必須使用 gif ! 嘖嘖.

另外有一個可以用來確認 layout 的網站 Browsershots, 很方便.

What is Browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

ref: this, this and this.