兼容性

 DIV＋CSS設計IE六、IE七、FF 兼容性 

DIV＋CSS網頁佈局這是一種趨勢,我也開始順應這股趨勢了,不過在使用DIV＋CSS網站設計的時候，應該注意css樣式兼容不一樣瀏覽器問題，特別是對徹底使用DIV+CSS設計的網頁，就應該更注意IE6 IE7 FF對CSS樣式的兼容.

 

什麼是瀏覽器兼容：當咱們使用不一樣的瀏覽器（Firefox IE7 IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另外一種下就亂了，咱們在編寫CSS的時候會很惱火，剛修復了這個瀏覽器的問題，結果另一個瀏覽器卻出了新問題。

 

1、!important (功能有限) 

隨着IE7對!important的支持, !important 方法如今只針對IE6的兼容.(注意寫法.記得該聲明位置須要提早.) 

例如: 

 

#example { 

width: 100px !important; /* IE7+FF */ 

width: 103px; /* IE6 */ 

} 

 

2、CSS HACK的方法

 

首先須要知道的是： 

 

全部瀏覽器 通用 height: 100px; 

IE6 專用 _height: 100px; 

IE7 專用 *+height: 100px; 

IE六、IE7 共用 *height: 100px; 

IE七、FF 共用 height: 100px !important; 

 

例如： 

 

#example { height:100px; } /* FF */ 

 

* html #example { height:200px; } /* IE6 */ 

 

*+html #example { height:300px; } /* IE7 */ 

 

下面的這種方法比較簡單 

 

舉幾個例子： 

 

一、IE6 - IE7+FF 

 

#example { 

height:100px; /* FF+IE7 */ 

_height:200px; /* IE6 */ 

} 

其實這個用上面說的第一種方法也能夠 

#example { 

height:100px !important; /* FF+IE7 */ 

height:200px; /* IE6 */ 

} 

 

二、IE6+IE7 - FF 

 

#example { 

height:100px; /* FF */ 

*height:200px; /* IE6+IE7 */ 

} 

 

三、IE6+FF - IE7 

 

#example { 

height:100px; /* IE6+FF */ 

*+height:200px; /* IE7 */ 

} 

 

四、IE6 IE7 FF 各不相同 

 

#example { 

height:100px; /* FF */ 

_height:200px; /* IE6 */ 

*+height:300px; /* IE7 */ 

} 

或： 

#example { 

height:100px; /* FF */ 

*height:300px; /* IE7 */ 

_height:200px; /* IE6 */ 

}