您現在的位置: 365建站網 > 365學習 > Div+css瀏覽器兼容實例分析(firefox??IE6??IE7)

Div+css瀏覽器兼容實例分析(firefox??IE6??IE7)

文章來源:365jz.com     點擊數:34091    更新時間: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;

請看下簡單的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:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */
*+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 . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
⑥ 作為外部 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瀏覽一下,應該沒有問題了。

現在寫一個瀏覽器兼容的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.

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (34091人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 天天干天天摸天天操| 真实国产乱子伦高清对白| 亚洲av美国av产亚洲av图片| 精品国产av自在拍500部| 风流妇科男医| 第九色区av天堂| 午夜寂寞全部排列表安卓| 国语对白东北粗口熟女| 俄罗斯14一18处交| 欧美乱码伦视频免费| 第九色区av天堂| 少妇高潮太爽了在线播放| 我和岳坶双飞| 清纯小美女主播流白浆| 国产成人无码免费视频97| 免费av无卡在线观看| 国产成人亚洲综合色婷婷| 女人与公拘交的A片视频网站| 韩国免费a级作爱片免费观看中国| 生辰八字姓名测试打分免费| 亚洲人成网站18禁止中文字幕| 高中生自慰www网站| 女人自熨全过程直播| 窝窝午夜看片| 超短裙老师的太紧太小| 97国产婷婷综合在线视频| 2021在线精品自偷自拍无码| 福利天堂芒果| 边吃奶边摸下很爽护士| 破冰行动全集免费观看| 很适合晚上一个人躲在被窝里| http://www.yehefot.com