css FF與IE兼容性總結
2024-07-11 08:27:20
供稿：網友
1. 超鏈接訪問過后hover樣式就不出現(xiàn)的問題
被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
2. FireFox下如何使連續(xù)長字段自動換行
眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入的方法來解決
Code:
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Js代碼
<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)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>
3.ff下為什么父容器的高度不能自適應
在子容器加了浮動屬性后,該容器將不能自動撐開,解決方法是在標簽結束后加上一個清除浮動的元素。
Code:
clear:both;
4.IE6的雙倍邊距BUG
浮動后本來外邊距10px,但IE解釋為20px,解決辦法是加上
Code:
display: inline
5. IE6下絕對定位的容器內文本無法正常選擇
此問題在IE6、7中存在,解決問題的辦法是讓IE進入到qurks mode。關于qurks mode的相關知識,請參考:
http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
6. IE6下圖片下方有空隙產生
解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block
或者設置vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom都可以解決.
7. IE6下兩個層中間有間隙
這個IE的3PX BUG也是經常出現(xiàn)的,解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
8. list-style-image無法準確定位
list-style-image的定位問題也是經常有人問的,解決的辦法一般是用li的背景模擬,這里采用相對定位的方法也可以解決。
9. LI中內容超過長度后以省略號顯示的方法
