CSS

今年在 COSCUP 大會上最主流的議題就是 Html5，今天看到一個網站 HTML5 Boilerplate，這網站提一個全新 html 5 模板，自從離開 Dreamweaver 樣板軟體，利用 Pspad 手動撰寫 html，此網站就發揮非常大的用處，提供全新 html，CSS 以及 javascript，支援了底下很多功能：

• 跨瀏覽器 (IE6…)
• 支援多種 html5 Tag
• Compress 和 cache html 檔案
• CSS IE6 , IE7 Hack
• IE6 Png Fix (連這個都幫忙解決了)
• 支援 CDN jQuery，避免在 local 端沒讀取到檔案 你還可以根據自己需要的功能做添加或者是減少，CSS reset、跨瀏覽器 CSS、robots.txt、Apache .htaccess cache 壓縮也有支援，如果不需要的功能，也可以參考看看，對於初學者也是非常好的學習例子。

先前在國外部落格發現一篇非常好用的教學：Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters，裡面有提供一部教學影片，非常好用，也很實在，底下可以先看影片，看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。 目前網頁製作，要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等)，就必須動到 CSS Hack，雖然 Google 已經宣稱不支援 IE6，但是很多單位，很多學校跟客戶都是使用 IE6 瀏覽器，不只國內這樣，國外大廠也都希望支援 IE 系列，包含 IE6, IE7, IE8，這時候就必須知道如何分別針對各種不同 IE 做設定，底下就來看看實做例子。

在 IE8 還沒出來之前，都是利用 margin: 0 auto; 的方式來解決 div 置中的問題，但是這在 IE8 並沒有發揮作用，無效了，底下在網路上發現兩種解法，分享給大家知道： 1. Width:100% 在最外層 div 加入 Width:100% 的屬性，程式碼如下：

#container {width:100%;}
#centered {width:400px; margin:0 auto;}

2. Text-Align:Center 在 div tag 裡面加入 Text-Align:Center，這樣 IE8 會偵測到此語法，就會服從 margin:0 auto; 之屬性，不過這樣內容會被全部至中，如果您有需要將其 div 內容往左邊對齊，那就必須在加上語法 Text-Align:left，底下是範例程式碼：

#container {text-align:center;}
#centered {width:400px; margin:0 auto;text-align:left;}

#wrap {
  margin: 0px auto; /* firefox */
  *margin: 0px auto; /* ie7 */
  _margin: 0px auto; /* ie6 */
  height:100px; 
  width:860px;
  border:5px solid red;    
}

Centering a Div in IE8 Using margin:auto 【CSS 語法教學】區塊置中的三種寫法

update 2009.05.07: IE7 之後開始支援 CSS 2.0，因此可以開始使用 hover 之前發表一篇用 jQuery 解決 IE 不支援 :hover css，今天在看 和多 寫的網站 Registrano html 原始碼，發現利用 CSS 也可以辦到啦，底下就是 Registrano css 原始碼： html 部份：

  

    

      test1
    
        
    
    

      test2