Div+css瀏覽器兼容實例分析(firefox??IE6??IE7)
文章來源：365jz.com 點擊數：34089 更新時間：2017-08-04 17:10 參與評論
用div+CSS布局來做頁面相比用table 來做頁面當然是好處多多,比如說我前面文章所提到過的"div+css網頁布局對SEO的好處"和網頁打開速度更快的優點,所以div+css布局也成為最愛歡迎和關注的焦點. 然而div+css瀏覽器兼容問題一直困繞著許多從事DIV＋CSS網頁排版的美工人員，尤其是IE與火狐的兼容.用div+css布局的網頁在IE下顯示一切正常,可是在火狐（FireFox）瀏覽器里打開，本來好好網頁一下子就全亂了.讓人怎么看?這一定會影響到你的網站的推廣,seo優化,不利于搜所引擎的搜索.所以解決div+css瀏覽器兼容的問題是完全必須的.
下面來看一下di+css瀏覽器兼容的實例，區分IE6，IE7，firefox 火狐瀏覽器CSS的寫法：
先來分開區分一下。
首先聲明div+css瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識別規則：
1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*；
2. IE6能識別*，但不能識別 !important,
3. IE7能識別*，也能識別!important;
4. firefox不能識別*，但能識別!important;
現在寫一個瀏覽器兼容的CSS樣式：
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度為20，IE6下的高度為50，IE7下的高度為80。
下面來看一下di+css瀏覽器兼容的實例，區分IE6，IE7，firefox 火狐瀏覽器CSS的寫法：
先來分開區分一下。
首先聲明div+css瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識別規則：
1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*；
2. IE6能識別*，但不能識別 !important,
3. IE7能識別*，也能識別!important;
4. firefox不能識別*，但能識別!important;
請看下簡單的div+css瀏覽器兼容實例:
1．IE6和firefox的區別：
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
2. IE6和IE7的區別：
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色
3. 區別IE7與FF：
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色
4. FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.
為了更加清楚的來表達說明div+css瀏覽器兼容下面表格是更加清楚的能表達IE6,IE7,FF之間的識別標識區別:
|
|
IE6
|
IE7
|
FF
|
|
*
|
√
|
√
|
×
|
|
important
|
×
|
√
|
√
|
css hack的理解
先來說一下什么是css hack ，寫了這么久的div+css代碼，我還真不知道這個hack是什么？上網仔細查了一下。簡單的說針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。
Css hack的原理：由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面
瀏覽器優先級別:FF < IE7 < IE6 , CSS hack書寫順序一般為FF IE7 IE6
來看下面div+css瀏覽器兼容的例子：
#demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/
*+html #demo {width:130px;} /*會被IE7執行*/
所以最后,#demo的寬度在三個瀏覽器的解釋為:
firefox:100px;
ie6:120px;
ie7:130px;
以上例子也可以用我的上一篇文章“div+css瀏覽器兼容實例一中的方法來解決！在這里就不再舉例了。”
Div+css瀏覽器的兼容技巧：
① 垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
② 水平居中. margin: 0 auto;(當然不是萬能)
③ 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
④ FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
⑤ ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
③ 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
④ FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
⑤ ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
⑥ 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
⑦ 關于手形光標. cursor: pointer. 而hand 只適用于 IE.
⑧ FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
注：針對firefox IE6 IE7的css樣式
現在大部分都是用!important來hack，對于IE6和firefox測試可以正常顯示，
但是IE7 !important可以正確解釋，會導致頁面沒按要求顯示！找到一個針
對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
注：針對firefox IE6 IE7的css樣式
現在大部分都是用!important來hack，對于IE6和firefox測試可以正常顯示，
但是IE7 !important可以正確解釋，會導致頁面沒按要求顯示！找到一個針
對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
現在寫一個瀏覽器兼容的CSS樣式：
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度為20，IE6下的高度為50，IE7下的高度為80。
給大家一點意見:能不用CSS Hack還是不用的好。其實在設計網站的時候，如果能考慮到一些可能出現CSS bug的地方，是最好的，我設計網站的時候都盡量避免CSS bug.一般高手都不用hack.
如對本文有疑問，請提交到交流論壇，廣大熱心網友會為你解答??！ 點擊進入論壇
您可能感興趣的文章:
------分隔線----------------------------
- 上一篇：JS 圖片輪播器
- 下一篇：div+css布局之float與clear的用法
大家感興趣的內容
最近更新的內容
鄂公網安備 42011102001344號 Copyright © 2013-2021