[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript

先前在國外部落格發現一篇非常好用的教學: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 做設定,底下就來看看實做例子。

[Read More]
CSS  html 

在 IE8 FireFox Chrome CSS 置中解決方法

在 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;}
IE6,IE7 則是利用下面語法:
#wrap {
  margin: 0px auto; /* firefox */
  *margin: 0px auto; /* ie7 */
  _margin: 0px auto; /* ie6 */
  height:100px; 
  width:860px;
  border:5px solid red;    
}
reference:

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

CSS 

使用 CSS 排版製作網站

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

[Read More]