網頁設計

關於網頁設計的技術或相關資訊分享

解決IE與Firefox等瀏覽器衝突─CSS HACK

  CSS Hack是當我們在網頁設計時,無論如何使用標準CSS,仍無法統一各瀏覽器,所採用的最後補救措施!但是CSS Hack有著許多的缺點,像是會讓CSS file多了許多累贅的描述,很多餘但是卻又必要...以及無法通過W3C驗證等等。 因此若是要使用CSS Hack來統一各瀏覽器之間的差異,務必要把他當成是網頁設計時最後的手段會比較好。

什麼是CSS Hack?

  就是指利用不同瀏覽器的一些特殊屬性(非W3C標準),來對不同瀏覽器進行設定,以達到前台視覺上統一的一種小技巧

使用時機:

  當用盡了各種方法仍無法統一各瀏覽器之間的差異...

使用方法:

方法一:區別FF與IE系列,使用屬性:\9

#csshack{ style="margin-left: 30px;">color:red; /*設定為紅色*/ style="margin-left: 30px;">color:blue\9; /*再將IE系列(6,7,8)設為藍色*/ }

說明:

  \9這個屬性只有IE系列能看的懂,利用CSS的特性:相同屬性後設定的會蓋掉之前設定的值。FF系列看不懂  color:red \9;這個設定,會自動略過,而IE系列會將其套入。

方法二:區別IE8與IE7以下系列,使用屬性:*

#csshack{ style="margin-left: 30px;">color:red; /*設定為紅色*/ style="margin-left: 30px;">*color:blue; /*IE7以下(6,7)設定為藍色*/ }

說明:

  *的這個屬性IE7以下系列能看的懂,使用這個屬性可以將IE8獨立出來而不會設定到。

方法三:針對IE6以下進行處理,使用屬性:_

#csshack{ style="margin-left: 30px;">color:red; /*設定為紅色*/ style="margin-left: 30px;">_color:blue; /*IE6以下的版本設定為藍色*/ }

說明:

  _這個屬性只有在IE6以下的版本能看的懂,使用這個屬性可以將IE6獨立進行設定。

綜合使用:使FF, IE8, IE7, IE6都有獨立不同的設定

#csshack { style="margin-left: 30px;">color:red ; /*Firefox 設定為紅色*/ style="margin-left: 30px;">color:orange\9; /*IE8 設定為橘色*/ style="margin-left: 30px;">*color:black; /*IE7 設定為黑色*/ style="margin-left: 30px;">_color:blue; /*IE6 設定為藍色*/ }

  再來就是利用這些特別的屬性以及網頁設計的經驗,來解決所碰上的各種bug囉。