日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
讓FireFox與IE兼容 CSS常見問題大全

在前端開發(fā)中，我們經(jīng)常遇到瀏覽器的兼容性問題，特別是IE與FireFox之間。文章列舉了開發(fā)人員比較常見的FireFox與IE之間的兼容性問題，同時給出了相關(guān)的解決方法。

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信平臺小程序開發(fā)、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

相關(guān)閱讀：CSS hack:實現(xiàn)IE6、IE7、Firefox兼容

1.超鏈接訪問過后hover樣式就不出現(xiàn)的問題

被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A：

 
 
 
      
  
  
  1.      
    2.   
  
  
  2.      
    3.   
  
  
  3.     
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

2.FireFox下如何使連續(xù)長字段自動換行

眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入 的方法來解決：

 
 
 
      
  
  
  1.      
    2.   
  
  
  2.      
    3.   
  
  
  3.      
    4.   
  
  
  4. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    5.   
  
  
  5. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    6.   
  
  
  6. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    7.   
  
  
  7. aaaaaaaaaaaaaaaaaaaaaaaaaaa
    
  •  
  •  
  •  
  •  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaa
    •  
  • Java代碼   
  •      
  • /* 
  • function toBreakWord(el, intLen){     
  •     var ōbj=document.getElementById(el);     
  •     var strContent=obj.innerHTML;       
  •     var strTemp="";     
  •     while(strContent.length>intLen){     
  •         strTemp+=strContent.substr(0,intLen)+" ";       
  •         strContent=strContent.substr(intLen,strContent.length);       
  •     }     
  •     strTemp+=" "+strContent;     
  •     obj.innerHTML=strTemp;     
  • }     
  • if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);     
  • /* ]]> */    
  •     
  •  
  •  
  • /* 
  • function toBreakWord(el, intLen){  
  •     var ōbj=document.getElementById(el);  
  •     var strContent=obj.innerHTML;    
  •     var strTemp="";  
  •     while(strContent.length>intLen){  
  •         strTemp+=strContent.substr(0,intLen)+" ";    
  •         strContent=strContent.substr(intLen,strContent.length);    
  •     }  
  •     strTemp+=" "+strContent;  
  •     obj.innerHTML=strTemp;  
  • }  
  • if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);  
  • /* ]]> */  
  •  

    • 3.ff下為什么父容器的高度不能自適應(yīng)

    在子容器加了浮動屬性后,該容器將不能自動撐開,解決方法是在標(biāo)簽結(jié)束后加上一個清除浮動的元素。

     
 
 
        
  
  
    1. clear: both;    
      2.   
  
  
    2. clear: both; 
      3.

    4.IE6的雙倍邊距BUG

    浮動后本來外邊距10px,但IE解釋為20px,解決辦法是加上：

     
 
 
        
  
  
    1. display: inline    
      2.   
  
  
    2. display: inline 
      3.

    5. IE6下絕對定位的容器內(nèi)文本無法正常選擇的問題

    此問題在IE6、7中存在,解決問題的辦法是讓IE進入到qurks mode。

    6. IE6下為什么圖片下方有空隙產(chǎn)生

    解決這個BUG的方法也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom
    都可以解決.

    7. IE6下兩個層中間怎么有間隙

    這個IE的3PX BUG也是經(jīng)常出現(xiàn)的,解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;

    8. list-style-image無法準(zhǔn)確定位的問題

    list-style-image的定位問題也是經(jīng)常有人問的,解決的辦法一般是用li的背景模擬,這里采用相對定位的方法也可以解決。

    9. LI中內(nèi)容超過長度后以省略號顯示的方法

    此方法適用與IE與OP瀏覽器：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.   
  
  
    3. li {     
      4.   
  
  
    4.     width: 200px;     
      5.   
  
  
    5.     white-space:nowrap;     
      6.   
  
  
    6.     text-overflow:ellipsis;      
      7.   
  
  
    7.     -o-text-overflow:ellipsis;      
      8.   
  
  
    8.     overflow: hidden;     
      9.   
  
  
    9.     }     
      10.   
  
  
    10. -->     
      11.   
  
  
    11.     
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.   
  
  
    15. li {  
      16.   
  
  
    16.     width: 200px;  
      17.   
  
  
    17.     white-space:nowrap;  
      18.   
  
  
    18.     text-overflow:ellipsis;   
      19.   
  
  
    19.     -o-text-overflow:ellipsis;   
      20.   
  
  
    20.     overflow: hidden;  
      21.   
  
  
    21.     }  
      22.   
  
  
    22. --> 
      23.   
  
  
    23.  
      24.

    #p#

    10.web標(biāo)準(zhǔn)中定義id與class有什么區(qū)別嗎

    一.web標(biāo)準(zhǔn)中是不容許重復(fù)ID的。

    比如 div id="aa"  不容許重復(fù)2次,而class 定義的是類,理論上可以無限重復(fù), 這樣需要多次引用的定義便可以使用他.

    二.屬性的優(yōu)先級問題。

    ID 的優(yōu)先級要高于class,看上面的例子。

    三.方便JS等客戶端腳本。

    如果在頁面中要對某個對象進行腳本操作,那么可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

    11.如何垂直居中文本

    將元素高度和行高設(shè)為一致。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    12.如何對齊文本與文本輸入框

     
 
 
        
  
  
    1. 加上vertical-align:middle;   
      2.   
  
  
    2.  
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.

    13.為什么FF下面不能水平居中呢

    FF下面設(shè)置容器的左右外補丁為auto就可以了。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    14.為什么FF下文本無法撐開容器的高度

    標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px;  這里為了照顧不認識min-height的IE6 可以這樣定義:

     
 
 
        
  
  
    1. {     
      2.   
  
  
    2. height:auto!important;     
      3.   
  
  
    3. height:200px;     
      4.   
  
  
    4. min-height:200px;     
      5.   
  
  
    5. }    
      6.   
  
  
    6.  
      7.   
  
  
    7. {  
      8.   
  
  
    8. height:auto!important;  
      9.   
  
  
    9. height:200px;  
      10.   
  
  
    10. min-height:200px;  
      11.   
  
  
    11. }  
      12.

    15.為什么IE6下容器的寬度和FF解釋不同呢

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.      
      7.   
  
  
    7. web標(biāo)準(zhǔn)常見問題大全
        
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  

    問題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導(dǎo)致的問題呢？大家把容器頂部的xml去掉就會發(fā)現(xiàn)原來問題出在這,頂部的申明觸發(fā)了IE的qurks mode。

    16.為什么web標(biāo)準(zhǔn)中IE無法設(shè)置滾動條顏色了

    解決辦法是將body換成html：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

    #p#

    17.為什么我定義的樣式?jīng)]有作用呢

    這里你無法用.aa定義到li 遇到這種情況怎么解決呢？答案是提高.aa 的優(yōu)先權(quán)。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.      
      7.   
  
  
      7.        
  
  
      •      
        •   
  
  
      • web標(biāo)準(zhǔn)常見問題大全  
        •   
  
  
      •        
  
  
           
      8.
        
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    •  
    •  
    • web標(biāo)準(zhǔn)常見問題大全  
    •  
     
  •  

    18.為什么無法定義1px左右高度的容器

    IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:

     
 
 
        
  
  
    1. overflow:hidden | zoom:0.08 | line-height:1px
      2.   
  
  
    2.   
      3.

    19.為什么這個背景顏色無法顯示

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.        
      7.   
  
  
    7.      
      8.   
  
  
    9. web標(biāo)準(zhǔn)常見問題大全
      10.        
  
  
    11. web標(biāo)準(zhǔn)常見問題大全
      12.        
  
  
    13. web標(biāo)準(zhǔn)常見問題大全
      14.        
  
  
    15. web標(biāo)準(zhǔn)常見問題大全
      16.        
  
  
    17. web標(biāo)準(zhǔn)常見問題大全
      18.      
         
  •     
  •  
  •  
  •  
  •  
  •  
  •  
  •     
  •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  
  • web標(biāo)準(zhǔn)常見問題大全
    •  
    •  
  •  
  •  
  •       
  •  
  •    

    • 20.怎么樣才能讓層顯示在FLASH之上呢

     
 
 
        
  
  
    1. 解決的辦法是給FLASH設(shè)置透明：  
      2.   
  
  
      3.   
  
  
    3.   
      4.

    21.怎樣使一個層垂直居中于瀏覽器中

    這里我們使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    22 .圖片垂直與容器內(nèi)

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

    或者使用背景圖的辦法:

     
 
 
        
  
  
    1. background:url("logo.gif") center no-repeat; 
      2.   
  
  
    2.  
      3.

    23.如何讓div橫向排列

    橫向排列DIV可以使用浮動的方式比如float:left,或者設(shè)置對象為內(nèi)聯(lián),還可以絕對定位對象等等。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.   
      6.

    【編輯推薦】

    1. CSS規(guī)范：你真的了解盒模型嗎？
    2. DIV+CSS中常見十大錯誤總結(jié)
    3. CSS hack:實現(xiàn)IE6、IE7、Firefox兼容 

    本文題目：讓FireFox與IE兼容 CSS常見問題大全
    網(wǎng)頁路徑：http://www.dlmjj.cn/article/ccsihij.html