瀏覽器支援問題

  • 文章分類: 學CSS
  • 9/28/2010
目前台灣瀏覽器市場由Mozilla Firefox、IE7、IE6佔了八成。但是CSS無法讓三個瀏覽器同時顯示出一模一樣的設計，因此如遇到瀏覽器顯示問題解決方法如下：
例：如果要同時要讓三個瀏覽器header裡的文字有一樣的位置要依序寫以下內容
.header{padding:50px;# padding:60px ;_ padding:40px }

說明：
‧Mozilla Firefox只支援第一個寫法因此後面兩個對Mozilla Firefox沒作用。
‧IE7支援第一及第二種寫法但是在CSS裡如果同時寫一樣的兩個指令CSS會以最後面的指令為基準。
‧IE6支援以上三種寫法因此要寫在最後。
‧如果相同的指令在Mozilla Firefox、IE8、IE7、IE6都不一樣時就必須使用特別語法針對各個瀏覽器做設定，要使各個瀏覽器皆能到位的語法順序如下:Mozilla Firefox、IE8、IE7、IE6，例:span{padding:5px;padding:10px\9;*padding:3px;_padding:8px;}，這樣就可使所有的瀏覽器span的內距都設定都設定不同的值。

特殊寫法：

Mozilla Firefox【!important】
IE6支援的有【_】、【#】、【*】 、【!important】
IE7支援的有【#】、【*】、【!important】
IE8支援的有【\9】、【!important】
例：
!important → padding:60px!important
* → *padding:60px
# → #padding:60px
_ → _padding:60px
\9→ padding:60px /9
※!important的權限比HTML大