能通過W3C驗證的IE6、IE7 css hack要點

就在IE9 preview已經掀起討論風潮的現在，IE6、IE7仍然陰魂不散。
基於IE9不支援windows XP的原因，看來這個陰魂不散的情形還會持續很久很久..
本來很期望世人能夠看見IE6、IE7實在是已經該被淘汰的事實，進而升級或者使用其他瀏覽器，
但是昨天上班時處理了一則必須教會老伯如何使用某網站的客服......
講完將近一小時的電話後深深的感受到什麼叫做「數位落差」啊！！！orz
馬上讓我理解到要讓許多不熟悉電腦的使用者自己下載瀏覽器來用、甚至更新IE都是不可能的任務..
對於這個悲慘的現實也只能摸摸鼻子接受了。
然而要做IE6、IE7的css hack對於許多網頁設計師來說仍然是會造成粗口連連的工作，
剛好對這部份有些小心得，剛才查詢了一下也沒有什麼相關資訊，
索性就厚臉皮的分享一篇。

css reset
要寫出跨瀏覽器都能顯示一致結果的css，第一件事應該就是css reset了，
這部份很多人寫我就不多說，
最熱門的兩種就是YUI css reset和Eric Meyer的版本了，
我自己習慣使用的是使用Eric Meyer的版本再稍加修改，
畢竟別人做的東西雖然方便但未必完全符合自己需求，修改之後可以用得更順手。


能通過W3C驗證的IE6、IE7 css hack寫法
大部分的教學中都是使用*和_來達成css hack，
在css的屬性前面加上*可以達到IE7的hack，而加上_則可以擺平IE6，
用起來非常方便，
不過在IE8終於追隨W3C的規範之後會在意網頁究竟能不能通過驗證的人也愈來愈多，
偏偏*和_的寫法不能過驗證，
搜尋很多資料後才找到了可以通過的寫法：
在選擇器前面加上*:first-child+html可以針對IE7 hack，
而加上* html則可以針對IE6 hack，
如此便能通過W3C驗證。

ex:

*:first-child+html #side {
margin-right: 5px;
}/*--for ie7--*/

* html #side {
margin-right: 2px;
}/*--for ie6--*/

注意針對IE6使用的* html在*號後面有一個空白字元，若是忘記加上的話也沒有辦法過驗證喔！


float的使用
一開始要做需要IE6、IE7 hack的網頁時最頭大的就是使用float的部份常常會大爆炸！
經歷過那些一測試就發現整個網頁大爆炸的日子...真是可怕。
後來發現了幾個關鍵點，修正之後世界就突然變得美好許多XD

對我來說最容易爆炸的就是使用了float的列表，
html的部份是這樣：

<ul id="top_menu">
  <li><a href="#">選項一</a></li>
  <li><a href="#">選項二</a></li>
  <li><a href="#">選項三</a></li>
  <li><a href="#">選項四</a></li>
</ul>

以前我會傻傻的寫這樣的css：
#top_menu li a {
    float: left;
    display: block;
    background: #cccccc;
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    border: #333333 1px solid;
    color: #666666;
    text-align: center;
}

很開心的在fx看見它們長得就像我心裡想的樣子：


可是等我打開IE tester之後，卻崩潰的發現...


一開始想了很多方法都解決不了，腦袋很蠢的卡在點選範圍一定要寫在a上才能感應這件事情，
於是有一陣子都只好改用絕對定位來寫，
但是這樣必須把每個項目都加上id或class，真的好煩！
後來有一天才赫然發現可以這樣寫：

#top_menu li {
    float: left;
}

#top_menu li a {
    display: block;
    background: #cccccc;
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    border: #333333 1px solid;
    color: #666666;
    text-align: center;
}

僅僅是把float搬進li層，馬上就省下好多麻煩事！
不知道還有沒有跟我一樣傻傻的把float寫進a裡面結果為了大爆炸苦惱的人...可以參考參考。

另外就是IE6對於margin範圍的判斷異於常..瀏覽器，
大多在解決float問題後還會發生爆炸都是margin問題，
試著調整一下，若還不行的話就把寬高指定固定值，再搭配overflow: hidden;通常都能夠獲得解決。

然後就可以大罵一聲IE sucks！之後收工啦XD！

寫這篇文章看看能不能幫助一些跟我一樣只知道蠻幹亂寫又沒人可以救的人~
如果只有我這麼呆...那就當作我在自嗨好啦 : ~
還是希望IE6、7早日安息，阿們。