CSS

先前在國外部落格發現一篇非常好用的教學：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
    
      
  
  

今天下午都在研究網站 CSS 的排版跟製作，在現在 Web 2.0 的時代，很多入口網站全部都改換成 CSS 來排版，取代掉原本的 Table 表格，這算是相當重大的改變，一來對於維護網站會相當方便，二來就是省下很多頻寬資源，大型入口網站：Yahoo、痞客幫 首頁全部都利用 CSS Div 的方式下去排版，當然一些基本的 CSS 觀念要有，這樣就很好學習了，CSS 排版觀念：CSS 盒子模式{.nav}、CSS 浮動 (Float)，可以參考 CSS 語法教學 這裡，這個網站寫的相當簡單，可以當作入門網站，順手就把之前幫學校做的一個網站：國立中正大學::第十屆全國實證經濟學論文研討會 全部換成 CSS，也通過 無障礙 A+ 程式驗證。