CSS浏览器兼容问题集-第四部分
12.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">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<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);
/*?]]>?*/
</scrīpt>
13.為什么IE6下容器的寬度和FF解釋不同呢
<?xml?version="1.0"?encoding="gb2312"?>
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<style?type="text/css">
<!--
div?{
????cursor:pointer;
????width:200px;
????height:200px;
????border:10px?solid?red
????}
-->
</style>
<div?ōnclick="alert(this.offsetWidth)">讓FireFox與IE兼容</div>?
問題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內,這里IE6解釋為200PX?,而FF則解釋為220PX,那究竟是怎么導致的問題呢？大家把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks?mode,關于qurks?mode、standards?mode的相關知識,請參考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true?
??
IE6,IE7,FF??
IE7.0出來了，對CSS的支持又有新問題。瀏覽器多了，網Bpx;?/*For?IE7?&?IE6*/???
_height:20px;?/*For?IE6*/???
注意順序。???
這樣也屬于CSS?HACK，不過沒有上面這樣簡潔。???
#example?{?color:?#333;?}?/*?Moz?*/???
*?html?#example?{?color:?#666;?}?/*?IE6?*/???
*+html?#example?{?color:?#999;?}?/*?IE7?*/???
第二種，是使用IE專用的條件注釋???
<!--其他瀏覽器?-->???
<link?rel="stylesheet"?type="text/css"?href="css.css"?/>???
<!--[if?IE?7]>???
<!--?適合于IE7?-->???
<link?rel="stylesheet"?type="text/css"?href="ie7.css"?/>???
<![endif]-->???
<!--[if?lte?IE?6]>???
<!--?適合于IE6及一下?-->???
<link?rel="stylesheet"?type="text/css"?href="ie.css"?/>???
<![endif]-->???
第三種，css?filter的辦法，以下為經典從國外網站翻譯過來的。.???
新建一個css樣式如下：???
#item?{???
????width:?200px;???
????height:?200px;???
????background:?red;???
}????
新建一個div,并使用前面定義的css的樣式：???
<div?id="item">some?text?here</div>????
在body表現這里加入lang屬性,中文為zh：???
<body?lang="en">????
現在對div元素再定義一個樣式：???
*:lang(en)?#item{???
????background:green?!important;???
}????
這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：???
#item:empty?{???
????background:?green?!important???
}????
:empty選擇器為css3的規范,盡管safari并不支持此規范,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。???
對IE6和FF的兼容可以考慮以前的!important?個人比較喜歡用第一種，簡潔，兼容性比較好。?
總結
以上是生活随笔為你收集整理的CSS浏览器兼容问题集-第四部分的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql常用管理命令
- 下一篇： js快速判断IE浏览器(兼容IE10与I