日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性

你對(duì)DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性問題是否比較熟悉，這里和大家分享一下，對(duì)完全使用DIV+CSS設(shè)計(jì)的網(wǎng)頁(yè)，就應(yīng)該更注意IE6、IE7、Firefox對(duì)CSS樣式的兼容。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),宣威企業(yè)網(wǎng)站建設(shè),宣威品牌網(wǎng)站建設(shè),網(wǎng)站定制,宣威網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,宣威網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性

　　DIV＋CSS網(wǎng)頁(yè)布局這是一種趨勢(shì),我也開始順應(yīng)這股趨勢(shì)了,不過在使用DIV＋CSS網(wǎng)站設(shè)計(jì)的時(shí)候，應(yīng)該注意css樣式兼容不同瀏覽器問題，特別是對(duì)完全使用DIV+CSS設(shè)計(jì)的網(wǎng)頁(yè)，就應(yīng)該更注意IE6、IE7、Firefox對(duì)CSS樣式的兼容，不然，你的網(wǎng)頁(yè)可能亂的一塌糊涂！我經(jīng)常被這些東西整的焦頭爛額,于是乎在網(wǎng)上找了些資料,加上自己的理解和這些日子的經(jīng)驗(yàn),整理了一些資料,其中有一些我還沒用到的和還不能理解的,就直接從別的地方給粘了過來,不知道有沒有錯(cuò)誤,等我以后用到的時(shí)候慢慢改吧,希望對(duì)大家有點(diǎn)幫助!

　　什么是瀏覽器兼容：當(dāng)我們使用不同的瀏覽器（FirefoxIE7IE6）訪問同一個(gè)網(wǎng)站，或者頁(yè)面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問題，在這種瀏覽器下顯示正常，在另一種下就亂了，我們?cè)诰帉慍SS的時(shí)候會(huì)很惱火，剛修復(fù)了這個(gè)瀏覽器的問題，結(jié)果另外一個(gè)瀏覽器卻出了新問題。好吧，我服了行吧，那我就利用你們的不兼容各寫一段css,讓他們各執(zhí)行各的，這下總該你沒脾氣了吧，呵呵。

一、!important(功能有限)

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

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. width:100px!important;/*IE7+Firefox*/  
    3. 
  
  
  
  3. width:200px;/*IE6*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

二、CSSHACK的方法

　　首先需要知道的是：

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

例如：

 
 
 
    
  
  
  
  1. #example{height:100px;}/*Firefox*/  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. *html#example{height:200px;}/*IE6*/  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. *+html#example{height:300px;}/*IE7*/  
    6. 
  
  
  
  6.  
    7.

 下面的這種方法比較簡(jiǎn)單

舉幾個(gè)例子：

1、IE6-IE7+Firefox

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox+IE7*/  
    3. 
  
  
  
  3. _height:200px;/*IE6*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. 其實(shí)這個(gè)用上面說的***種方法也可以  
    6. 
  
  
  
  6. #example{  
    7. 
  
  
  
  7. height:100px!important;/*Firefox+IE7*/  
    8. 
  
  
  
  8. height:200px;/*IE6*/  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10.  
    11.

 2、IE6+IE7-Firefox

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox*/  
    3. 
  
  
  
  3. *height:200px;/*IE6+IE7*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

 3、IE6+Firefox-IE7

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*IE6+Firefox*/  
    3. 
  
  
  
  3. *+height:200px;/*IE7*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5.  
    6.

 4、IE6IE7Firefox各不相同

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox*/  
    3. 
  
  
  
  3. _height:200px;/*IE6*/  
    4. 
  
  
  
  4. *+height:300px;/*IE7*/  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6. 或：  
    7. 
  
  
  
  7. #example{  
    8. 
  
  
  
  8. height:100px;/*Firefox*/  
    9. 
  
  
  
  9. *height:300px;/*IE7*/  
    10. 
  
  
  
  10. _height:200px;/*IE6*/  
    11. 
  
  
  
  11. }  
    12. 
  
  
  
  12.  
    13.

 　　需要注意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因?yàn)闉g覽器在解釋程序的時(shí)候，如果重名的話，會(huì)用后面的覆蓋前面的，就象給變量賦值一個(gè)道理，所以我們把通用的放前面，越專用的越放后面。
解釋一下4的代碼：

讀代碼的時(shí)候，***行height:100px;大家都通用，IE6IE7Firefox都顯示100px
到了第二行*height:300px;Firefox不認(rèn)識(shí)這個(gè)屬性，IE6IE7都認(rèn)，所以Firefox還顯示100px，而IE6IE7把***行得到的height屬性給覆蓋了，都顯示300px

到了第三行_height:200px;只有IE6認(rèn)識(shí)，所以IE6就又覆蓋了在第二行得到的height,最終顯示200px
這樣，三個(gè)瀏覽器都有自己的height屬性了，各玩各的去吧

這樣說要是你還不明白，要么你去撞墻，要么我去!不過還是你去比較好。

哦，差點(diǎn)忘了說了：
*+html對(duì)IE7的兼容必須保證HTML頂部有如下聲明：
 

 
 
 
    
  
  
  
  1. 
  
  
  
  2.  
    3. 
  
  
  
  3. "http://www.w3.org/TR/html4/loose.dtd"> 
    4. 
  
  
  
  4.  
    5.

#p#三、使用IE專用的條件注釋

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.   
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  > 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.   
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  > 
    16. 
  
  
  
  16.  
    17.

 貌似要編三套css，我還沒用過，先粘過來再說

IE的if條件Hack

 
 
 
    
  
  
  
  1. 1. 除IE外都可識(shí)別  
    2. 
  
  
  
  2. 2.  
    3. 
  
  
  
  3. 3.  
    4. 
  
  
  
  4. 4.  
    5. 
  
  
  
  5. 5.  
    6. 
  
  
  
  6. 6.  
    7. 
  
  
  
  7. 7.  
    8. 
  
  
  
  8. 8.  
    9. 
  
  
  
  9. 9.  
    10. 
  
  
  
  10. 10.  
    11. 
  
  
  
  11. 11. 注:gt=GreatThen大于  
    12.

>=>大于號(hào)
lt=LessThen小于
<= gte=GreatThenorEqual大于或等于
lte=LessThenorEqual小于或等于

四、cssfilter的辦法

　　新建一個(gè)css樣式如下：

 
 
 
    
  
  
  
  1. #item{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. width:200px;  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. height:200px;  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. background:red;  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. }  
    10. 
  
  
  
  10.  
    11.

　　新建一個(gè)div,并使用前面定義的css的樣式：

 
 
 
    
  
  
  
  1. sometexthere div> 
    2. 
  
  
  
  2.  
    3.

在body表現(xiàn)這里加入lang屬性,中文為zh：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3.

現(xiàn)在對(duì)div元素再定義一個(gè)樣式：

 
 
 
    
  
  
  
  1. *:lang(en)#item{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. background:green!important;  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. }  
    6. 
  
  
  
  6.  
    7.

　　這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對(duì)這句話不會(huì)有任何作用,于是也達(dá)到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：

 
 
 
    
  
  
  
  1. #item:empty{  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. background:green!important  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. }  
    6.

:empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會(huì)選擇此元素,不管是否此元素存在,現(xiàn)在綠色會(huì)現(xiàn)在在除ie各版本以外的瀏覽器上。#p#

五、FLOAT閉合（clearingfloat）

　　網(wǎng)頁(yè)在某些瀏覽器上顯示錯(cuò)位很多時(shí)候都是因?yàn)槭褂昧薴loat浮動(dòng)而沒有真正閉合，這也是div無法自適應(yīng)高度的一個(gè)原因。如果父div沒有設(shè)float而其子div卻設(shè)了float的話,父div無法包住整個(gè)子DIV，這種情況一般出現(xiàn)在一個(gè)父DIV下包含多個(gè)子DIV。解決辦法：

１、給父DIV也設(shè)上float(不要罵我，我知道是廢話)

2、在所有子DIV后新加一個(gè)空DIV(不推薦，有些瀏覽器可以看見空DIV產(chǎn)生的空隙)

比如：

 
 
 
    
  
  
  
  1. .parent{width:100px;}  
    2. 
  
  
  
  2. .son1{float:left;width:20px;}  
    3. 
  
  
  
  3. .son2{float:left;width:80px;}  
    4. 
  
  
  
  4. .clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  div> 
    8. 
  
  
  
  8.  div> 
    9. 
  
  
  
  9.  div> 
    10. 
  
  
  
  10.  div> 
    11. 
  
  
  
  11.  
    12.

 3、萬能float閉合

　　將以下代碼加入GlobalCSS中,給需要閉合的div加上class=”clearfix”即可,屢試不爽.
代碼: