最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

新聞中心

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

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

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

DIV＋CSS設計IE6、IE7、Firefox兼容性

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

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

一、!important(功能有限)

　　隨著IE7對!important的支持,!important方法現(xiàn)在只針對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.

 下面的這種方法比較簡單

舉幾個例子：

1、IE6-IE7+Firefox

 
 
 
    
  
  
  
  1. #example{  
    2. 
  
  
  
  2. height:100px;/*Firefox+IE7*/  
    3. 
  
  
  
  3. _height:200px;/*IE6*/  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. 其實這個用上面說的***種方法也可以  
    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.

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

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

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

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

哦，差點忘了說了：
*+html對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外都可識別  
    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.

>=>大于號
lt=LessThen小于
<= gte=GreatThenorEqual大于或等于
lte=LessThenorEqual小于或等于

四、cssfilter的辦法

　　新建一個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.

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

 
 
 
    
  
  
  
  1. sometexthere div> 
    2. 
  
  
  
  2.  
    3.

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

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3.

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

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

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

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

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

五、FLOAT閉合（clearingfloat）

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

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

2、在所有子DIV后新加一個空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”即可,屢試不爽.
代碼: