在網(wǎng)站設(shè)計的時候，應(yīng)該注意css樣式兼容不同瀏覽器問題，特別是對完全使用DIVCSS設(shè)計的網(wǎng)，就應(yīng)該更注意IE6、IE7、FF對CSS樣式的兼容。

DIVCSS設(shè)計時IE6、IE7、FF兼容性問題解決

在網(wǎng)站設(shè)計的時候，應(yīng)該注意css樣式兼容不同瀏覽器問題，特別是對完全使用DIVCSS設(shè)計的網(wǎng)，就應(yīng)該更注意IE6、IE7、FF對CSS樣式的兼容，不然，你的網(wǎng)亂可能出去不想出現(xiàn)的效果！

所有瀏覽器通用
height:100px;
IE6專用
_height:100px;
IE6專用
*height:100px;
IE7專用
*+height:100px;
IE7、FF共用
height:100px!important;

一、CSS兼容

以下兩種方法幾乎能解決現(xiàn)今所有兼容.

1,!important(不是很推薦，用下面的一種感覺最安全)

隨著IE7對!important的支持,!important方法現(xiàn)在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
代碼:
 

<style> 
#wrapper{  
width:100px!important;  
width:80px;  
}  
style> 

2,IE6/IE77對FireFox

*+html與*html是IE特有的標(biāo)簽,firefox暫不支持.而*+html又為IE7特有標(biāo)簽.
代碼:
 

<style> 
#wrapper{width:120px;}  
*html#wrapper{width:80px;}  
*+html#wrapper{width:60px;}  
style> 

注意:
*+html對IE7的兼容必須保證HTML頂部有如下聲明：
代碼:
 

 
　"http://www.w3.org/TR/html4/loose.dtd"> 

#p#二、萬能float閉合(非常重要!)

可以用這個解決多個div對齊時的間距不對，
關(guān)于clearfloat的原理可參見[HowToClearFloatsWithoutStructuralMarkup]
將以下代碼加入GlobalCSS中,給需要閉合的div加上class=”clearfix”即可,屢試不爽.
代碼:
 

<style> 
.clearfix:after{  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix{  
display:inline-block;  
}  
.clearfix{display:block;}  
style> 

三、其他兼容技巧(相當(dāng)有用)

1,FF下給div設(shè)置padding后會導(dǎo)致width和height增加,但IE不會.(可用!important解決)

2,居中問題.

1).垂直居中.將line-height設(shè)置為當(dāng)前div相同的高度,再通過vetical-align:middle.(注意內(nèi)容不要換行.)
2).水平居中.margin:0auto;(當(dāng)然不是萬能)
3,若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式,需要設(shè)置display:block;(常見于導(dǎo)航標(biāo)簽)
4,FF和IE對BOX理解的差異導(dǎo)致相差2px的還有設(shè)為float的div在ie下margin加倍等問題.
5,ul標(biāo)簽在FF下面默認有l(wèi)ist-style.和padding.最好事先聲明,以避免不必要的麻煩.(常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6,作為外部wrapper的div不要定死高度,最好還加上overflow:hidden.以達到高度自適應(yīng).
7,關(guān)于手形光標(biāo).cursor:pointer.而hand只適用于IE.貼上代碼:

兼容代碼:兼容最推薦的模式。
 

.submitbutton{  
float:left;  
width:40px;  
height:57px;  
margin-top:24px;  
margin-right:12px;  
}  
*html.submitbutton{  
margin-top:21px;  
}  
*+html.submitbutton{  
margin-top:21px;  
} 

#p#◆瀏覽器兼容

什么是瀏覽器兼容：當(dāng)我們使用不同的瀏覽器（FirefoxIE7IE6）訪問同一個網(wǎng)站，或者頁面的時候，會出現(xiàn)一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，我們在編寫CSS的時候會很惱火，剛修復(fù)了這個瀏覽器的問題，結(jié)果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法，能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。

最近微軟發(fā)布的IE7瀏覽器的兼容性確實給一些網(wǎng)頁制作人員添加了一個沉重的負擔(dān)，雖然IE7已經(jīng)走向標(biāo)準化，但還是有許多和FF不同的地方，所以需要用到IE7的兼容，有許多朋友問過IE7的兼容是什么，其實我也不知道。暫時還沒找到IE7專用的兼容。除了前面那片文章，《針對firefoxie6ie7的css樣式》中的兼容方式也是很好用的。
有一點邏輯思想的人都會知道可以用IE和FF的兼容結(jié)合起來使用，下面介紹三個兼容，例如：

程序代碼

第一個兼容，IEFF所有瀏覽器公用（其實也不算是兼容）
height:100px;

第二個兼容IE6專用
_height:100px;

第三個兼容IE6IE7公用
*height:100px;

介紹完了這三個兼容了，下面我們再來看看如何在一個樣式里分別給一個屬性定義IE6IE7FF專用的兼容，看下面的代碼，順序不能錯哦：

程序代碼
 

height:100px;  
*height:120px;  
_height:150px; 

下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：

在FF下，第2、3個屬性FF不認識，所以它讀的是height:100px;

在IE7下，第三個屬性IE7不認識，所以它讀第1、2個屬性，又因為第二個屬性覆蓋了第一個屬性，所以IE7最終讀出的是第2個屬性*height:120px;

在IE6下，三個屬性IE6都認識，所以三個屬性都可以讀取，又因為第三個屬性覆蓋掉前2個屬性，所以IE6最終讀取的是第三個屬性。

【編輯推薦】

1. 熱點透視 DIV CSS完美兼容IE6 IE7 FF的通用方法
2. 探究IE8與IE7具體功能中窗口功能按鈕的變化
3. IE6 IE7 IE8三個版本的CSS兼容速查手冊
4. 探秘IE8 JavaScript功能超乎想象
5. 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題