DIV CSS 佈局教程網

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

51CTO相關閱讀：CSS hack:實現IE6、IE7、Firefox兼容

1.超鏈接訪問過後hover樣式就不出現的問題

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

<style type="text/CSS">     
<!--      
a:link {}     
a:visited {}     
a:hover {}     
a:active {}     
-->     
</style>    
 
<style type="text/CSS"> 
<!--   
a:link {}  
a:visited {}  
a:hover {}  
a:active {}  
--> 
</style> 

2.Firefox下如何使連續長字段自動換行

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

<style type="text/CSS">     
<!--      
div {     
    width:300px;     
    word-wrap:break-Word;     
    border:1px solid red;     
}     
-->     
</style>     
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>    
 
<style type="text/CSS"> 
<!--   
div {  
    width:300px;  
    word-wrap:break-Word;  
    border:1px solid red;  
}  
--> 
</style> 
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
Java代碼   
<scrīpt type="text/Javascrīpt">     
/* <![CDATA[ */    
function toBreakWord(el, intLen){     
    var ōbj=document.getElementById(el);     
    var strContent=obj.innerHtml;       
    var strTemp="";     
    while(strContent.length>intLen){     
        strTemp+=strContent.substr(0,intLen)+"&#10;";       
        strContent=strContent.substr(intLen,strContent.length);       
    }     
    strTemp+="&#10;"+strContent;     
    obj.innerHtml=strTemp;     
}     
if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);     
/* ]]> */    
</script>    
 
<scrīpt type="text/Javascrīpt"> 
/* <![CDATA[ */  
function toBreakWord(el, intLen){  
    var ōbj=document.getElementById(el);  
    var strContent=obj.innerHtml;    
    var strTemp="";  
    while(strContent.length>intLen){  
        strTemp+=strContent.substr(0,intLen)+"&#10;";    
        strContent=strContent.substr(intLen,strContent.length);    
    }  
    strTemp+="&#10;"+strContent;  
    obj.innerHtml=strTemp;  
}  
if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);  
/* ]]> */  
</script> 

3.ff下為什麼父容器的高度不能自適應

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

clear: both;    
clear: both; 

4.IE6的雙倍邊距BUG

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

display: inline    
display: inline 

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

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

6. IE6下為什麼圖片下方有空隙產生

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

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

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

8. list-style-image無法准確定位的問題

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

9. LI中內容超過長度後以省略號顯示的方法

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

<style type="text/CSS">     
<! --      
li {     
    width: 200px;     
    white-space:nowrap;     
    text-overflow:ellipsis;      
    -o-text-overflow:ellipsis;      
    overflow: hidden;     
    }     
-->     
</style>    
 
<style type="text/CSS"> 
<! --   
li {  
    width: 200px;  
    white-space:nowrap;  
    text-overflow:ellipsis;   
    -o-text-overflow:ellipsis;   
    overflow: hidden;  
    }  
--> 
</style>