在網站設計的時候,應該注意css樣式兼容不同瀏覽器問題,特別是對完全使用DIV CSS設計的網,就應該更注意IE6 IE7 FF對CSS樣式的兼容,不然,你的網亂可能出去不想出現的效果!Java中文網海量權威開發資料,歡迎游客會員投稿。
所有瀏覽器 通用
height: 100px;
IE6 專用
_height: 100px;
IE6 專用
*height: 100px;
IE7 專用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下兩種方法幾乎能解決現今所有兼容.
1, !important (不是很推薦,用下面的一種感覺最安全)
隨著IE7對!important的支持, !important 方法現在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
代碼:
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.
代碼:
注意:
*+html 對IE7的兼容 必須保證HTML頂部有如下聲明:
代碼:
二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,
關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
代碼:
三、其他兼容技巧(相當有用)
1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vetical-align: middle.( 注意內容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7, 關于手形光標. cursor: pointer. 而hand 只適用于 IE.貼上代碼:
兼容代碼:兼容最推薦的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什么是瀏覽器兼容:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法,能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!
最近微軟發布的IE7瀏覽器的兼容性確實給一些網頁制作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到IE7的兼容,有許多朋友問過IE7的兼容是什么,其實我也不知道。暫時還沒找到IE7專用的兼容。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的兼容方式也是很好用的。 本文內容來源中文Java開發網http://www.javaweb.cc/ 歡迎游客會員投稿
有一點邏輯思想的人都會知道可以用IE和FF的兼容結合起來使用,下面介紹三個兼容,例如:(適合新手,呵呵,高手就在這里路過吧。)
程序代碼
第一個兼容,IE FF 所有瀏覽器 公用(其實也不算是兼容)
height:100px;
第二個兼容 IE6專用
_height:100px;
第三個兼容 IE6 IE7公用
*height:100px;
介紹完了這三個兼容了,下面我們再來看看如何在一個樣式里分別給一個屬性定義IE6 IE7 FF專用的兼容,看下面的代碼,順序不能錯哦:
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性: