打開(kāi)一看，哇哈，終于來(lái)了，ff好多不兼容的問(wèn)題來(lái)了。隨便點(diǎn)擊了下不兼容的問(wèn)題就有上十個(gè)了。一個(gè)個(gè)慢慢解決，慢慢搜索。。。。。。。先把幾個(gè)簡(jiǎn)單的整理分享一下。
1.最簡(jiǎn)單的鼠標(biāo)移過(guò)手變型的css要改了 cursor:pointer; dw8下面自動(dòng)出來(lái)的也沒(méi)有hand這個(gè)屬性了，標(biāo)準(zhǔn)的是pointer
2.ff不支持濾鏡 最常見(jiàn)的半透明不支持。
filter: Alpha(Opacity=50);
opacity: .5;
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"
3.ff不支持expression 例如去掉鏈接的邊框要分別寫不同的css
a,area { blr:expression_r(this.onFocus=this.blur()) }
:focus { outline: none; }
4.ff不支持div滾動(dòng)條的顏色設(shè)置，目前還沒(méi)有找到替換的好方法。
.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:"宋體";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
這個(gè)在ff里面完全沒(méi)有效果了。
5.ie下面顯示在文字下面橫線的border-width: 0px 0px 1px 0px;在ff里面跑到文字上面去了。（查了手冊(cè)還是沒(méi)有找到解決的辦法感覺(jué)莫名奇妙～～ 原來(lái)是ff的容錯(cuò)能力太差了，是下面的width: 186px;height: 0px;寬高引起的，其實(shí)a:haver已經(jīng)繼承了上級(jí)的屬性了，只要定義不同的樣式就可以了，看來(lái)ff有助于制作標(biāo)準(zhǔn)化，簡(jiǎn)潔化的網(wǎng)頁(yè)啊，對(duì)css的理解也更深刻，對(duì)提供css來(lái)說(shuō)是個(gè)很好的幫助）
.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
}
//下面的寫法在ie下面正常，但在ff下是錯(cuò)誤的
.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}
相關(guān)參考資料：
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
如果定義四個(gè)值,那么這四個(gè)值就分別是上,右,下,左邊框的寬度值(從上邊框開(kāi)始,以逆時(shí)針的順序遍歷).
等價(jià)于下面的定義
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ff不支持<body scroll="no" > scroll屬性，必須定義overflow:hidden;而且要在html標(biāo)簽下，不能在body下
html{
overflow:hidden;
}
7.ff不支持?jǐn)?shù)據(jù)島綁定<xml id="news" src="news.xml" ></xml>在ie下可以加載進(jìn)數(shù)據(jù)，但到了火狐就加載不進(jìn)數(shù)據(jù)了，開(kāi)始以為可能是因?yàn)閮?nèi)容行文字太多導(dǎo)致不能斷行不能加載，但刪除只剩幾個(gè)字以后一樣不行。
8.style="word-break:break-all"在網(wǎng)頁(yè)中的單元格里的內(nèi)容超出一行時(shí),在ie瀏覽器里定義的換行樣式能夠正常使用, 但在firefox里卻不能被支持了.style="word-break:break-all" 是MS擴(kuò)展的IE專有屬性，并未成為W3C標(biāo)準(zhǔn)，因而 Firefox 還不能支持它。不過(guò)MS已經(jīng)將其提交到了W3C，而在W3C的CSS3的候選方案中也能看到它。希望這個(gè)屬性在被W3C最終定案的為CSS3標(biāo)準(zhǔn)后， Firefox可以支持吧。這之前，可以試試
style="table-layout:fixed;word-wrap: break-word" （當(dāng)它是英文的時(shí)候就不能正常換行了）
9.目前FF2.0為止都不支持IE的name錨點(diǎn)
像這種寫法都是不支持的：<a href="###" onclick="history.go(-1)">go back</a>
原來(lái)根據(jù)W3C的語(yǔ)法，<a>標(biāo)簽始終都會(huì)查找href地址并跳轉(zhuǎn)過(guò)去，現(xiàn)在onclick事件與###這個(gè)地址又有沖突。
為了讓 Firefox與IE部分元素屬性兼容，那個(gè)費(fèi)勁，我無(wú)意中發(fā)現(xiàn)Firefox對(duì)空格敏感：
<a onclick="window.location.href ='faq.php?page=messages#2'"> //有空格，錨點(diǎn)作用
<a onclick="window.location.href='faq.php?page=messages#2'"> //無(wú)空格，錨點(diǎn)無(wú)作用
錨點(diǎn)的寫法又十分講究，比如<a name=#1>，F(xiàn)irefox不支持錨點(diǎn)，得加上id=#1
靜態(tài)同頁(yè)面引用時(shí)必須這樣寫：<a href="#1"></a>，<a href="static.html#1"></a>就不行，動(dòng)態(tài)頁(yè)面要用JS
后遺癥來(lái)了，考慮到鼠標(biāo)樣式和瀏覽器兼容又開(kāi)始折騰：
<a href="###" onclick=""> //不兼容
<a href="javascript:;" onclick=""> //不兼容
<a href="javascript:function();"> //沒(méi)有{...},屬于腳本的非法書寫
<a style="cursor:hand" onclick=""> //沒(méi)照顧到自定義系統(tǒng)鼠標(biāo)樣式的用戶
<a href="javascript:onclick=''"> //狀態(tài)欄會(huì)顯現(xiàn)，href有多長(zhǎng)顯示多長(zhǎng)
<a href=# onclick=""> //我用的
10.ff火狐下面不支持document.all屬性的，必需用 document.getElementByIdx_x('idName');
以下是我的動(dòng)畫切換效果，在ie下正常，到了火狐里面就不動(dòng)了，修改后可以切換圖片但漸隱漸現(xiàn)的效果就沒(méi)有了。原因是火狐不支持濾鏡filter,只好用半透明的div來(lái)實(shí)現(xiàn)了。
function playcompanyimg()
{
window.setInterval('changecompanyimg();', interval);
}
function changecompanyimg()
{
//if (document.all)
//{
number = Math.floor(Math.random() * image.length);
idtemp.src=image[number];
//alert(number+" ii "+idtemp.src)
//alert(do_transition);
//document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
var companyimgidtmep = document.getElementByIdx_x('companyimg');
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters[0].Apply();
companyimgidtmep.filters[0].Play();
//}
}
參考資料：核心：FILTER:revealTrans(duration=1,transition=23); 一個(gè)IE濾鏡，
在其它的非IE瀏覽器雖然不支持這個(gè)濾鏡，但是支持透明濾鏡的，你可以分一下，IE下繼續(xù)使用你這個(gè)效果，而在非IE瀏覽器下用透明濾鏡：
style.opacity
opacity = 0.5 CSS3
style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面這個(gè)濾鏡 這個(gè)濾鏡也適用于Netscape
style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明濾鏡。
IE：
obj.filters.alpha.opacity
to meizz(梅花雪)
其實(shí)我想過(guò)你那個(gè)問(wèn)題的。但是透明 opacity 這個(gè)他不是一個(gè)漸變的過(guò)程。
一般這種圖片過(guò)度特效最多持續(xù)一秒把，最多最多兩秒 duration=2
超過(guò)2秒就很累贅，喧賓奪主了。
在2秒鐘里面實(shí)現(xiàn)
g_img.style.filter="alpha(opacity="+i+")" 透明度的變化是比較累贅的事情。
要用 window.setInterval 改變 i 的值， 而且還要調(diào)用幾十上百次window.setInterval
才能看到效果。
這樣的話，我覺(jué)得得不賠失，是為了特效而特效了
另外一種考慮是，畢竟非ie瀏覽器是少數(shù)，即使在ff下 沒(méi)有圖片過(guò)度特效，其實(shí)也沒(méi)什么，
還是很流暢，不過(guò)就是看不到ie里面的美而已。
11.ff 下鏈接的onclick事件不起作用
<div id="bigwhatwedo" ><a href="javascript:onclick = display('whatwedo')" target="">我們做什么</a></div> 在ie下沒(méi)有問(wèn)題，在ff下點(diǎn)擊了沒(méi)有反應(yīng)。作了多次嘗試，換成onclick="display('whatwedo')"仍然不行，后來(lái)通過(guò)多次檢查，搜索仍然找不到門路，最后采用慣用的方法－－一步一步alert();出來(lái)看效果，原來(lái)他媽的是一個(gè)id的值寫錯(cuò)了，但奇怪的是ie下面沒(méi)有關(guān)系？是 ie的容錯(cuò)內(nèi)容太強(qiáng)了還是火狐的容錯(cuò)內(nèi)容太差了？不過(guò)還是喜歡火狐的嚴(yán)謹(jǐn)和標(biāo)準(zhǔn)哈。可以讓人發(fā)現(xiàn)不少深層次的東西。哈哈。
12.ff中div 定位不能通過(guò)js初始化 必須先設(shè)定值并且要設(shè)定度量單位 top:80px;left:212px;
13.ff不能用.click();方法打開(kāi)鏈接，終于暫時(shí)性的解決了
<div><a href="#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="" onclick ="test2(1)" id="b3">hello2</a></div>
<div><a href="javascript:onclick =test2(1)" id="b3">hello3</a>觸發(fā)事件放在href="javascript:onclick =test2(1)" 里面ff無(wú)效</div>
<div onclick="test2(1)" id="b3">hello3</div>
<script language="javascript">
<!--
function test1(num)
{
window.alert(num);
}
function test2(num)
{
var aaa_a = document.getElementByIdx_x("a3_a");
if(document.all) {//if(getOs()=="MSIE"){//IE的處理
aaa_a.click();
}
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click",true,true);
aaa_a.dispatchEvent(evt);
}
}
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
//--> </script>
<!-- 由于這里的鏈接是index的iframe用href="#" 在ie中無(wú)法正常顯示，
而用 href="javascript:onclick = display('whatwedo')"的方式火狐不支持打開(kāi)第一個(gè)鏈接，火狐必須用onclick="display('whoweare')"
本以為火狐瀏覽器使用的人很多，但從網(wǎng)站的統(tǒng)計(jì)分析來(lái)看火狐只有可憐的3.18%，但兼容他的標(biāo)準(zhǔn)確花費(fèi)不少精力！不過(guò)標(biāo)準(zhǔn)化有利于以后的維護(hù)和擴(kuò)展，有利于技術(shù)的不斷提示。
-->
14.OVERFLOW-Y:auto;OVERFLOW-X:hidden;在ie里面可以用no 表示隱藏，但在ff里面必須用hidden
－－－－－－－－－－－－－－－－－－－－－－－－－
總結(jié)一下：目前有十個(gè)不兼容問(wèn)題，還沒(méi)解決的有：
4.ff不支持div滾動(dòng)條的顏色設(shè)置，目前還沒(méi)有找到替換的好方法，在許多標(biāo)準(zhǔn)化的網(wǎng)站看到也是沒(méi)有解決這個(gè)問(wèn)題。
7.ff 不支持?jǐn)?shù)據(jù)島綁定<xml id="news" src="news.xml" ></xml>在ie下可以加載進(jìn)數(shù)據(jù)，但到了火狐就加載不進(jìn)數(shù)據(jù)了，開(kāi)始以為可能是因?yàn)閮?nèi)容行文字太多導(dǎo)致不能斷行不能加載，但刪除只剩幾個(gè)字以后一樣不行。用w3c代碼檢測(cè)軟件檢測(cè)了一下，原來(lái)是自定義的xml標(biāo)簽通不過(guò)，所以火狐就不認(rèn)了。
10.火狐不支持濾鏡 filter，無(wú)法實(shí)現(xiàn)圖片切換中間變換的效果，只能通過(guò)透明度來(lái)設(shè)置，但很麻煩.（這個(gè)目前暫不實(shí)現(xiàn)了）
CSS 兼容要點(diǎn)：
DOCTYPE 影響 CSS 處理
FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行
FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width
FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式
div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行
cursor: pointer 可以同時(shí)在 IE FF 中顯示， hand 僅 IE 可以
FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行
參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格
這里只考慮 IE5.5+ 的情況，有些教程還在討論 IE5 的兼容性，我覺(jué)得就沒(méi)有什么必要了
1、使整個(gè)塊在頁(yè)面居中對(duì)齊
IE瀏覽器：先設(shè)定 body 的樣式為 text-align: center; 然后指定區(qū)塊的樣式 margin: auto ; text-align: left ;
FF瀏覽器：指定區(qū)塊的樣式 margin: auto ; 即可
2、使用 XHTML 1.0 Transitional 標(biāo)準(zhǔn)時(shí)， width 與 height 不兼容
FF瀏覽器：用 !important width: width + padding + border;
如：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
width:300px !important;
}
IE是不能識(shí)別 width:300px !important; 的，但在 Firefox 中能識(shí)別，從而達(dá)到兩者兼容的目的。
如果這個(gè)元素設(shè)定了float屬性，還可以使用一個(gè)更簡(jiǎn)單的辦法使之兼容
加上 display:inline;
即是：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
float:left;
display:inline;
}
注意：在沒(méi)有指定 float 的時(shí)候使用 display:inline; 在FF中是無(wú)效的。
3、hand 指針圖標(biāo)屬性
FF是不能識(shí)別 cursor: hand; 的，可以用 cursor: pointer ，這樣兩個(gè)瀏覽器都能識(shí)別。
4、腳本引入的書寫方式
這里討論的主要是 XHTML 1.0 標(biāo)準(zhǔn)，據(jù)說(shuō)在 1.1 中，腳本引入必須寫成
<script type="text/javascript">
為了兼容，可以寫成
<script language="text/javascript" type="text/javascript">
因?yàn)榘碭ML的標(biāo)準(zhǔn)，多一個(gè)無(wú)關(guān)的屬性是不影響解析的，但能達(dá)到兩者兼容的目的。
5、嵌套DIV：父DIV的高度不能根據(jù)子DIV自動(dòng)變化的解決方案
IE 瀏覽器對(duì)于多重DIV嵌套自適應(yīng)高度是非常理想的，不管使用百分比還是固定值父DIV都會(huì)根據(jù)子DIV變化而變化，但在FF瀏覽等，子DIV如果比父 DIV高則會(huì)越過(guò)父DIV，從而影響總體排版，必須指定父ID為float,然后通過(guò)在子DIV后加一個(gè)clear的DIV來(lái)解決，如：
<div id="parent" style="float:left">
<div id="content"></div>
</div>
<div style="clear: both;"></div>
對(duì)高度的解析
IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當(dāng)內(nèi)容超過(guò)高度時(shí)，將使用實(shí)際高度
Firefox：沒(méi)有定義高度時(shí)，如果內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會(huì)造成和實(shí)際內(nèi)容高度不符合的情況；當(dāng)定義了高度，但是內(nèi)容超過(guò)高度時(shí)，內(nèi)容會(huì)超出定義的高度，但是區(qū)域使用的樣式不會(huì)變化，造成樣式錯(cuò)位。
結(jié)論：大家在可以確定內(nèi)容高度的情況下最好定義高度，如果真的沒(méi)有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會(huì)出現(xiàn)混亂！
img對(duì)象alt和title的解析
alt：當(dāng)照片不存在或者load錯(cuò)誤時(shí)的提示；
title：照片的tip說(shuō)明。
在IE中如果沒(méi)有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標(biāo)準(zhǔn)中的定義使用
結(jié)論：大家在定義img對(duì)象時(shí)，最后將alt和title對(duì)象都寫全，保證在各種瀏覽器中都能正常使用
其他的細(xì)節(jié)差別
當(dāng)你在寫css的時(shí)候，特別是用float: left（或right）排列一竄圖片時(shí)，會(huì)發(fā)現(xiàn)在firefox里面正常而IE里面有問(wèn)題。無(wú)論你用margin:0,還是border: 0來(lái)約束，都無(wú)濟(jì)于事。
其實(shí)這里還有另外一個(gè)問(wèn)題，就是IE對(duì)于空格的處理，firefox是忽略的而IE對(duì)于塊與塊之間的空格是處理的。也就是說(shuō)一個(gè)div結(jié)束后要緊接著一個(gè)div寫，中間不要有回車或者空格。不然也許會(huì)有問(wèn)題，比如3px的偏差，而且這個(gè)原因很難發(fā)現(xiàn)。
非常不走運(yùn)的是我又碰到了這樣的問(wèn)題，多個(gè)img標(biāo)簽連著，然后定義的float: left，希望這些圖片可以連起來(lái)。但是結(jié)果在firefox里面正常而IE里面顯示的每個(gè)img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒(méi)有作用。
后來(lái)的解決方法是在img外面套li，并且對(duì)li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對(duì)于一些模型的解釋會(huì)產(chǎn)生很多錯(cuò)誤問(wèn)題，只有多多嘗試才能發(fā)現(xiàn)原因。
2、嵌套DIV:父DIV的高度不能根據(jù)子DIV自動(dòng)變化的解決方案
<div id="parent">
<div id="content"> </div>
</div>
當(dāng)Content內(nèi)容多時(shí)，即使parent設(shè)置了高度100%或auto,在不同瀏覽器下還是不能完好的自動(dòng)伸展。 解決方案
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
在層的最下方產(chǎn)生一個(gè)高度為1的空格，可解除這個(gè)問(wèn)題
3、CSS DIV 學(xué)習(xí)筆記
一、基本上每個(gè)區(qū)塊的div 都要有自己的id，杜絕不同功能的區(qū)塊用同一個(gè)id/class
二、每個(gè)稍大的區(qū)塊div 后面都跟一個(gè)<!-- /id -->標(biāo)記開(kāi)始、結(jié)束
三、隱藏文字的又一種方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0
四、巧妙地處理并列的兩列:
1)
右列為P, width=44.5%, float=left
左列為P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid
以上兩種方法關(guān)鍵點(diǎn)在于選擇其中一個(gè)為float=left
五、隨機(jī)的切換圖片：
#random {
BACKGROUND: url(/rotate.php);
}
這個(gè)方法很巧妙。
4、關(guān)于div的高度自適應(yīng)
今天小尿讓我?guī)退捻?yè)子解決一個(gè)問(wèn)題，就是div的高度自適應(yīng)，也就是在一個(gè)父級(jí)div中嵌套一左一右兩個(gè)子div，右邊的子div內(nèi)容可無(wú)限擴(kuò)展，而可以使得父級(jí)div的高度能被無(wú)限拉長(zhǎng)，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級(jí) div的高度就固定在10px左右，無(wú)法自適應(yīng)高度，height:auto也不行，怎么辦呢。網(wǎng)上參考到一篇資料，要實(shí)現(xiàn)自適應(yīng)高度，div層必須具有 float屬性，于是我開(kāi)始動(dòng)手試驗(yàn)，float:left的話，div就跑到頁(yè)面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那么里面的就算float:left也不會(huì)被移動(dòng)位置了。
xhtml:
==========================================================
<div id="container_father">
<div id="container">
<div id="panel"> test<br />
test<br />
test<br />
<!-- id="panel" -->
</div>
<div id="sidebar">
<ul>
<li class="current">預(yù)安裝檢查</li>
<li>閱讀 PFC 授權(quán)協(xié)議</li>
<li>初始化數(shù)據(jù)庫(kù)</li>
<li>完成安裝</li>
</ul>
<!-- id="sidebar" -->
</div>
<!-- id="container" -->
</div>
</div>
CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}
FRom: http://ulean.zg163.net/
5、 深入標(biāo)準(zhǔn) ~ The IE Doubled Float-Margin Bug(IE雙倍浮動(dòng)邊界Bug)
什么發(fā)生故障？
一段無(wú)錯(cuò)的代碼把一個(gè)居左浮動(dòng)(float:left)的元素放置進(jìn)一個(gè)容器盒(box)，并在浮動(dòng)元素上使用了左邊界(margin-left) 來(lái)令它和容器的左邊產(chǎn)生一段距離。看起來(lái)相當(dāng)?shù)暮?jiǎn)單，對(duì)嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動(dòng)元素的邊界長(zhǎng)度被神秘地翻了一倍！
情況應(yīng)該如何？
下面的圖釋展示了一個(gè)簡(jiǎn)單的div(茶色的盒子)包含著一個(gè)居左浮動(dòng)的div(綠色的盒子)。浮動(dòng)元素有一個(gè)100px的左邊界，使容器盒與它的左邊緣之間產(chǎn)生了一個(gè)100px的間隙。到現(xiàn)在為止，一直都還不錯(cuò)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
陳舊的IE“雙倍占據(jù)”
原樣的相同代碼被在IE/Win中瀏覽時(shí)以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。
這為什么會(huì)發(fā)生？別問(wèn)這種傻問(wèn)題！這就是IE，記得嗎？符合標(biāo)準(zhǔn)只是理想的狀況，不指望實(shí)現(xiàn)，這個(gè)簡(jiǎn)單的事實(shí)正驗(yàn)證了。
重點(diǎn)
這個(gè)Bug僅當(dāng)浮動(dòng)邊界和浮動(dòng)元素的方向相同時(shí)出現(xiàn)在浮動(dòng)元素和容器盒的內(nèi)邊緣之間，在這之后的任意有著相似邊界的浮動(dòng)元素不會(huì)呈現(xiàn)雙倍邊界。只有特定的浮動(dòng)行的第一個(gè)浮動(dòng)元素會(huì)遭遇這個(gè)Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。
最后，修復(fù)辦法！
直到現(xiàn)在(04年1月)這個(gè)Bug一直被認(rèn)為是無(wú)法修復(fù)的，通常用來(lái)替代錯(cuò)誤的邊界的控制方法如：一個(gè)不可視浮動(dòng)元素的左邊距，連同一個(gè)內(nèi)嵌的盒子一起，可視的盒子裝在不可視浮動(dòng)元素里；或者使用技巧僅對(duì)IE/Win設(shè)定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過(guò)現(xiàn)在全部結(jié)束了。
Steve Clason發(fā)現(xiàn)了一個(gè)修復(fù)辦法，描述在他的Guest Demo里，修復(fù)了雙倍邊界和圍繞文字縮進(jìn)Bug。這是一個(gè)經(jīng)典的IE的Bug修復(fù)辦法，使用一個(gè)屬性來(lái)修復(fù)影響不相關(guān)屬性的Bug。
現(xiàn)在如何來(lái)做？
研究它，簡(jiǎn)單地將{display: inline;}設(shè)置給浮動(dòng)元素就是全部所需做的！是的，聽(tīng)起來(lái)太簡(jiǎn)單了，不是嗎？不過(guò)這是真的，僅僅一個(gè)display的"inline"聲明已經(jīng)能夠勝任了。
熟悉規(guī)則的人知道浮動(dòng)元素自動(dòng)設(shè)置為"block"元素，而不管他們之前是什么。就如Steve從W3C里指出：
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate
boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top
(subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
這說(shuō)明浮動(dòng)元素上的{display: inline;}會(huì)被忽略，事實(shí)上所有的瀏覽器沒(méi)有呈現(xiàn)任何改變，包括IE。但是，它不知何故讓IE停止將浮動(dòng)元素的邊界翻倍。因而，這個(gè)修復(fù)辦法可以被直接應(yīng)用，而沒(méi)有任何繁瑣的隱藏方法。如果將來(lái)的一款瀏覽器決定對(duì)這個(gè)修復(fù)辦法抱恙，只要把這個(gè)修復(fù)裝入IE獨(dú)用的Tan Hack里，細(xì)節(jié)如同IE Three Pixel Text-Jog Demo。
下面是兩個(gè)使用了前面相同代碼的生動(dòng)演示，第一個(gè)照常顯示了IE的Bug，下一個(gè)對(duì)浮動(dòng)元素使用了"inline"修復(fù)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
firefox和IE對(duì)某些css樣式的認(rèn)定有不少區(qū)別，包括：
ul和ol的默認(rèn)padding值是不一樣的，在Firefox中，padding-left默認(rèn)值為40px左右，而IE中為0，一般設(shè)置ul{margin:0;padding:0;}就能解決大部分問(wèn)題
對(duì)字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大，也只能設(shè)置為14px了事；(暫時(shí)沒(méi)有發(fā)現(xiàn))
并列排列的多個(gè)元素（圖片或者鏈接）的代碼中的空格和回車會(huì)造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）
對(duì)不規(guī)范代碼的兼容情況不同，IE中漏掉的關(guān)閉符號(hào)對(duì)顯示不造成影響，而firefox中就會(huì)形成錯(cuò)亂的布局，而在ie中用到的padding和margin的負(fù)值都會(huì)被firefox解析為0，易造成布局的混亂；（我覺(jué)得好像負(fù)值在firefox中也是有顯示的）
firefox對(duì)于長(zhǎng)高尺寸的嚴(yán)格解析會(huì)造成與設(shè)置不匹配（超出）的圖片或表格將原設(shè)置div撐大；
！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來(lái)令一個(gè)CSS兼容多種瀏覽器；
未定義id的div，在IE中會(huì)與div屬性中的其他設(shè)置有關(guān)，而在firefox中的位置會(huì)于div在文件中位置有關(guān)，緊隨前一個(gè)div出現(xiàn)……（有待嘗試）
設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍的，特別是margin-left，這是ie6的一個(gè)bug。解決的方法是在這個(gè)div里面加上display:inline;
如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不知道具體怎么回事）
FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行。IE里設(shè)置text-align:center，就居中了，但在FF中不行。所以一般兩個(gè)都要設(shè)置。
FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width（也沒(méi)感覺(jué)，覺(jué)得設(shè)了padding，大家的高寬都變了）
在FF中可以實(shí)現(xiàn)的div 垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行。這種方法在IE中實(shí)現(xiàn)不了。（已試過(guò)！有用）
FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。
在浮動(dòng)（float）的div后加clear屬性，這可以解決背景的自適應(yīng)高度問(wèn)題。怎么加才能讓不同瀏覽器都好使？IE中有默認(rèn)行高，這是要解決的問(wèn)題。
FF中不支持文字的自動(dòng)轉(zhuǎn)行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標(biāo)準(zhǔn)。（現(xiàn)在看到的解決辦法都是通過(guò)編程實(shí)現(xiàn)）
ul和ol的默認(rèn)padding值是不一樣的，在Firefox中，padding-left默認(rèn)值為40px左右，而IE中為0，一般設(shè)置ul{margin:0;padding:0;}就能解決大部分問(wèn)題
對(duì)字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大，也只能設(shè)置為14px了事；(暫時(shí)沒(méi)有發(fā)現(xiàn))
并列排列的多個(gè)元素（圖片或者鏈接）的代碼中的空格和回車會(huì)造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）
對(duì)不規(guī)范代碼的兼容情況不同，IE中漏掉的關(guān)閉符號(hào)對(duì)顯示不造成影響，而firefox中就會(huì)形成錯(cuò)亂的布局，而在ie中用到的padding和margin的負(fù)值都會(huì)被firefox解析為0，易造成布局的混亂；（我覺(jué)得好像負(fù)值在firefox中也是有顯示的）
firefox對(duì)于長(zhǎng)高尺寸的嚴(yán)格解析會(huì)造成與設(shè)置不匹配（超出）的圖片或表格將原設(shè)置div撐大；
！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來(lái)令一個(gè)CSS兼容多種瀏覽器；
未定義id的div，在IE中會(huì)與div屬性中的其他設(shè)置有關(guān)，而在firefox中的位置會(huì)于div在文件中位置有關(guān)，緊隨前一個(gè)div出現(xiàn)……（有待嘗試）
設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍的，特別是margin-left，這是ie6的一個(gè)bug。解決的方法是在這個(gè)div里面加上display:inline;
如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不知道具體怎么回事）
FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行。IE里設(shè)置text-align:center，就居中了，但在FF中不行。所以一般兩個(gè)都要設(shè)置。
FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width（也沒(méi)感覺(jué)，覺(jué)得設(shè)了padding，大家的高寬都變了）
在FF中可以實(shí)現(xiàn)的div 垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行。這種方法在IE中實(shí)現(xiàn)不了。（已試過(guò)！有用）
FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。
在浮動(dòng)（float）的div后加clear屬性，這可以解決背景的自適應(yīng)高度問(wèn)題。怎么加才能讓不同瀏覽器都好使？IE中有默認(rèn)行高，這是要解決的問(wèn)題。
FF中不支持文字的自動(dòng)轉(zhuǎn)行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標(biāo)準(zhǔn)。（現(xiàn)在看到的解決辦法都是通過(guò)編程實(shí)現(xiàn)）
css解決不同瀏覽器的兼容問(wèn)題的方法:
（不是我們需要的方法，我們要達(dá)到的要求是盡量不寫!important也能解決）
解決這種問(wèn)題可以通過(guò)規(guī)范css代碼，使其符合兩種規(guī)范的標(biāo)準(zhǔn)樣式，也可以在差別處利用！important對(duì)firefox設(shè)置屬性，或者針對(duì)多種瀏覽器分別各自配置合適的CSS文件，再通過(guò)判斷瀏覽器選擇不同CSS實(shí)現(xiàn)兼容性。
代碼如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333
3.FF解決背景的自適應(yīng)高度問(wèn)題
①對(duì)于背景不能自動(dòng)延伸的原因上面說(shuō)的很清楚，解決方法是多嵌套一個(gè)層,這個(gè)層設(shè)置浮動(dòng)，并承擔(dān)背景，就ok了。
下面就簡(jiǎn)單示意一下
本行代碼就是讓背景顏色自動(dòng)延續(xù)
可以這么理解：float使得層自動(dòng)獲得寬和高
但是有了第三種方法，這種方法好像并不值得推薦。
②另一種方法就是給第一個(gè)div賦予屬性值：display:table；但這種方法會(huì)造成另外一些布局上的錯(cuò)誤。可以考慮使用，但不建議使用。
③我想這是最重要的一種方法，但是中間問(wèn)題很多。方法就是clear:both。
.clear{clear:both}可以使高度向下延續(xù)，但是會(huì)自動(dòng)產(chǎn)生行高；
.clear{clear:both;height:0}在FF中清除了行高，但是IE里不認(rèn)；
.clear{clear:both;height:1%}在FF和IE中仍然不認(rèn)；
像之前寫的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中卻不能讓背景顏色延續(xù)，除非加上邊框。！挺有意思，還是不太懂
.clear{clear:both;line-height:1px}好使！我理解是清的這個(gè)容器默認(rèn)是行元素，所以高對(duì)它不起作用，所以你無(wú)論把height設(shè)置為幾都沒(méi)有效果，而line-height本身就是作用于行元素的，所以好使！
上面理解的不對(duì)!重新理解是：IE里面有默認(rèn)的行高，必須把行高給清掉，可以用font-size:0px或line-height:0px；但是這里又有一個(gè)問(wèn)題，就是height的值不要用百分?jǐn)?shù)，沒(méi)有用！
本行代碼就是讓背景顏色自動(dòng)延續(xù)
代碼如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333