WEB前端標(biāo)準(zhǔn)在各瀏覽器中的實(shí)現(xiàn)差異

WEB前端標(biāo)準(zhǔn)在各瀏覽器中的實(shí)現(xiàn)差異貘2010-08-28歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍標(biāo)準(zhǔn)都說了什么？文檔格式：HTML布局：CSS與宿主環(huán)境有關(guān)腳本語(yǔ)言：Javascript文檔操作方式：DOM歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE的hasLayout與BlockFormattingContext規(guī)范異同linebox與InlineFromattingContexts的理解DOMAttributes與JSObject差異tracemonkey的腳本優(yōu)化HTTP頭內(nèi)編碼聲明在瀏覽器內(nèi)的容錯(cuò)影響主要話題IEHASLAYOUT

AND

BLOCKFORMATTINGCONTEXTS

歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍'Layout'是IE的專有概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位和尺寸計(jì)算，與其他元素的關(guān)系和相互作用，以及對(duì)應(yīng)用還有使用者的影響。MSDN"HasLayout"Overview:/en-us/library/bb250481(VS.85).aspxIE的haslayout與BlockFormattingContexts規(guī)范異同BlockFormattingContexts（塊格式化上下文）是W3CCSS2.1規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。在BFC中，每一個(gè)元素左外邊與包含塊的左邊相接觸（對(duì)于從右到左的格式化，右外邊接觸右邊），即使存在浮動(dòng)也是如此（盡管一個(gè)元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮），除非這個(gè)元素也創(chuàng)建了一個(gè)新的BFC。浮動(dòng)元素、絕對(duì)定位元素、inline-blocks、table-cells、table-captions以及'overflow'值不是'visible'的元素，會(huì)創(chuàng)建BFC?！咀ⅰ浚篊SS3中，將Blockformattingcontexts叫做flowroot。對(duì)于觸發(fā)方式也做了修改：Thevalueof‘position’isneither‘static’nor‘relative’見[CSS3]：/TR/css3-box/#block-level0歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE的hasLayout與BlockFormattingContexts規(guī)范異同在觸發(fā)hasLayout的元素和創(chuàng)建了BlockFormattingContexts的元素中，浮動(dòng)元素參與高度的計(jì)算?！咀ⅰ?IE8標(biāo)準(zhǔn)文檔模式下觸發(fā)了haslayout特性的元素不再擁有"清理"浮動(dòng)元素功能，它回歸了標(biāo)準(zhǔn)的BlockFormattingContexts規(guī)范

，只有創(chuàng)建BFC后才擁有此功能。<divstyle="width:300px;background:gray;overflow:auto;"> <divstyle="float:left;background:gold;">float:left</div></div>包含浮動(dòng)元素特性(浮動(dòng)清理)：<divstyle="width:300px;background:gray;"> <divstyle="float:left;background:gold;">float:left</div></div>歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE的hasLayout與BlockFormattingContexts規(guī)范異同不能與浮動(dòng)元素相互覆蓋特性：<divstyle="width:300px;height:150px;background:gray"><divstyle="float:left;background:gold;margin:010px;">FloatBlock</div><divstyle="background:green;zoom:1;">BlockFormattingContent/haslayout</div></div><divstyle="width:300px;height:150px;background:gray"><divstyle="float:left;background:gold;margin:010px;">FloatBlock</div><divstyle="background:green;overflow:auto;">BlockFormattingContent/haslayout</div></div>歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE的hasLayout與BlockFormattingContexts規(guī)范異同不能與浮動(dòng)元素相互覆蓋特性：在觸發(fā)hasLayout的元素和創(chuàng)建了BlockFormattingContexts的元素中，浮動(dòng)元素參與高度的計(jì)算。【注】:IE8標(biāo)準(zhǔn)文檔模式下zoom:1不再觸發(fā)haslayout特性。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍在標(biāo)準(zhǔn)文檔模式中，合理利用blockformatingcontext與IE的haslayout特性實(shí)現(xiàn)兩列文字布局。IE的hasLayout與BlockFormattingContexts規(guī)范異同<style>*{margin:0;padding:0;font-size:14px;}ol{list-style:none;width:200px;}olli{overflow:hidden;}ollistrong{float:left;}ollip{_display:inline;overflow:auto;zoom:1;}/*用inlinehack修復(fù)IE6bug*/</style><ol><li><strong>內(nèi)容：</strong><p>“地球一小時(shí)”</p></li><li><strong>內(nèi)容.內(nèi)容：</strong><p>“地球一小時(shí)”</p></li><li><strong>內(nèi)容.容：</strong><p>“地球一小時(shí)”</p></li><li><strong>內(nèi)容.內(nèi)容.內(nèi)容：</strong><p>“地球一小時(shí)”</p></li></ol>歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍利用BFC和hasLayout清理LI容器內(nèi)浮動(dòng)元素，并利用BFC和haslayout區(qū)域不與浮動(dòng)框重合的特性，簡(jiǎn)單的實(shí)現(xiàn)兩列文字布局。IE的hasLayout與BlockFormattingContexts規(guī)范異同LINEBOX

AND

INLINEFROMATTINGCONTEXT歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍LineBox與InlineFromattingContext歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍LineBox是個(gè)計(jì)算值，它由line-height(height)和vertical-align特性值共同決定的，多個(gè)LineBoxs構(gòu)成了行內(nèi)格式化上下文每一個(gè)行內(nèi)元素會(huì)產(chǎn)生一個(gè)行內(nèi)框；行內(nèi)框會(huì)在行框內(nèi)橫向排列；'line-height'特性值指定了每個(gè)行內(nèi)非替換元素生成的行內(nèi)框的

確切

高度；行內(nèi)替換元素的高度由'height'特性值決定；文字在行內(nèi)框中垂直排列，上下空隙用半差異填補(bǔ)；如果字號(hào)大于行內(nèi)框則文字從上下方向上溢出行內(nèi)框，并可能滲入到其他行框內(nèi)（行框是永遠(yuǎn)不會(huì)重疊的）；'vertical-align'特性值指定了每個(gè)行內(nèi)框的垂直對(duì)齊方式；行框的頂邊界是這一系列垂直對(duì)齊的行內(nèi)框最高的頂邊框，底邊界是最低的底邊框。行框的高度是頂邊界到底邊界的距離。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍正常LineBox計(jì)算示意圖歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE6IE7IE8(Q)下LineBox計(jì)算錯(cuò)誤錯(cuò)誤的計(jì)算正確的計(jì)算歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍IE6IE7IE8(Q)下LineBox計(jì)算錯(cuò)誤正確的計(jì)算錯(cuò)誤的計(jì)算DOMATTRIBUTES

AND

JAVASCRIPTPROPERTY歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍DOMAttributes歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍這需要從DOM-Level-2的附錄D說起：AppendixD:ECMAScriptLanguageBinding根據(jù)W3CDOM規(guī)范附錄中DOM對(duì)象與ECMAScript規(guī)范中對(duì)象的綁定關(guān)系可知，DOM本身是一套接口實(shí)現(xiàn)，調(diào)用相應(yīng)的方法或取得相應(yīng)的屬性，其返回值是嚴(yán)格遵循DOM本身規(guī)范的。而ECMAScript規(guī)范中描述的對(duì)象類型有其自身意義范疇，當(dāng)使用ECMAScript語(yǔ)法調(diào)用DOM是需要將兩者提供的不同對(duì)象類型間的綁定。比如某DOM方法返回一個(gè)Element對(duì)象，他被綁定到ECMAScript中一個(gè)對(duì)象(Object)上，如果對(duì)這個(gè)Object某屬性進(jìn)行賦值和取值操作，究竟是對(duì)Object對(duì)象本身屬性還是對(duì)Element對(duì)象屬性做相關(guān)操作呢？這就產(chǎn)生了二意性。由此DOM規(guī)范中提供了getAttribute與setAttribute方法用來明確為Element對(duì)象屬性做賦值取值操作。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍這兩者是綁定關(guān)系，但是他們都有相應(yīng)的方法設(shè)置、修改和刪除屬性。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍HTMLELEMENT=HTML的標(biāo)簽屬性（ElementAttribute）+JS對(duì)象內(nèi)屬性（ObjectProperty）<ElementAttributes/>+{JSObject:Propertys}DOMObject.*Attribute?方法用來對(duì)Element內(nèi)String型屬性進(jìn)行處理DOMObject.*方法用來對(duì)JSObjecte內(nèi)property屬性進(jìn)行處理歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍<divid="A"></div><script>varA=document.getElementById("A");A.setAttribute("myAttribute","DOMAttribute")A.myAttribute="ObjectProperty";A.innerHTML=A.getAttribute("myAttribute")+":"+A.myAttribute;</script>IE6IE7IE8print:ObjectProperty:ObjectPropertyotherprint:DOMAttribute:ObjectPropertyIE8以及以下版本瀏覽器中混淆了DOMAttribute和ObjectProperty導(dǎo)致以上問題出現(xiàn)。TRACEMONKEY

SCRIPTOPTIMIZATION歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的腳本優(yōu)化歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey就是Firefox的腳本引擎啦~~functionfoo(){return2+4};alert(foo);Firefoxprint:functionfoo(){return6}otherprint:functionfoo(){return2+4};歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式邏輯語(yǔ)句中的函數(shù)定義會(huì)被轉(zhuǎn)換為函數(shù)表達(dá)式，這與它本身的優(yōu)化機(jī)制還有關(guān)系。先來看對(duì)邏輯語(yǔ)句的優(yōu)化：functionfoo(){if(true){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}foo();alert(foo);歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式Firefoxprint:Afunctionfoo(){functionA(){alert("A");}A();}otherprint:Bfunctionfoo(){if(true){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}Firefox中不可能被運(yùn)行到的分支被優(yōu)化掉了。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式規(guī)避其優(yōu)化策略，可以使用計(jì)算值代替TRUE。使用計(jì)算值避免Firefox對(duì)邏輯語(yǔ)句的優(yōu)化：functionfoo(){if(1===1){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}foo();alert(foo);這樣Firefox就不會(huì)優(yōu)化代碼內(nèi)容了

。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式這就沒問題了么？還是看看結(jié)果吧：?。?？？！！無(wú)語(yǔ)了==botherprint:Bfunctionfoo(){if(1===1){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}Firefoxprint:Afunctionfoo(){if(1===1){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式實(shí)際上問題是這樣的：JS引擎在處理腳本程序之前會(huì)對(duì)內(nèi)容作語(yǔ)法整理，由于JS內(nèi)沒有塊級(jí)作用域，函數(shù)聲明會(huì)被提高到當(dāng)前執(zhí)行塊(Global或Function)的頂端執(zhí)行。語(yǔ)法樹整理后代碼：functionfoo(){functionA(){alert('A')};functionA(){alert('B')};if(1===1){}else{}A();}同名函數(shù)A覆蓋前面的函數(shù)A，導(dǎo)致執(zhí)行結(jié)果為B。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍tracemonkey的條件函數(shù)表達(dá)式tracemonkey則處理的不是這么"規(guī)范"。這個(gè)引擎太聰明了，它認(rèn)為條件語(yǔ)句內(nèi)的函數(shù)聲明應(yīng)該是函數(shù)表達(dá)式，因此并不將其進(jìn)行比要的語(yǔ)法整理。tracemonkey語(yǔ)法樹整理后代碼：functionfoo(){varA;if(1===1){A=function(){alert('A')};}else{A=function(){alert('B')};}A();}同名函數(shù)表達(dá)式存在于不同分支語(yǔ)句中，并不產(chǎn)生覆蓋/重寫效果，實(shí)際結(jié)果為A。ENCODINGDECLARATION

INTHEBROWSERAFFECTS

THEFAULT-TOLERANT歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍編碼聲明在瀏覽器內(nèi)的容錯(cuò)影響確定一個(gè)文檔的字符編碼的優(yōu)先級(jí)順序（由高至低）：HTTP"Content-Type"字段中的"charset"參數(shù)。

Content-Type:text/html;charset=ISO-8859-1META聲明中"http-equiv"為"Content-Type"對(duì)應(yīng)的值中的"charset"的值。

<METAhttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">元素的charset屬性。

<scriptcharset="iso-8859-1"src="XXX"></script>我們通常情況下為頁(yè)面設(shè)定的字符編碼信息所指對(duì)應(yīng)到瀏覽器內(nèi)部大多是字符編碼別名，如ISO-8859-1。指定了瀏覽器無(wú)法識(shí)別的字符編碼別名時(shí)，瀏覽器參照上面的優(yōu)先級(jí)順序采用更低優(yōu)先級(jí)的字符編碼，以此類推。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍編碼聲明在瀏覽器內(nèi)的容錯(cuò)影響各瀏覽器對(duì)于沒有任何字符編碼設(shè)定的頁(yè)面所采用的編碼類型：<!DOCTYPEhtml><html><head></head><body><script>document.write((document.charset||document.characterSet).toUpperCase());</script></body></html>IE6IE7IE8FirefoxChromeSafariOpera字符編碼---GB2312×?·?±à??---ISO-8859-1字符編碼---GBK操作系統(tǒng)及瀏覽器語(yǔ)言均為簡(jiǎn)體中文。頁(yè)面中沒有設(shè)定任何的字符編碼信息，頁(yè)面自身的編碼為

GB2312。當(dāng)頁(yè)面沒有設(shè)置任何字符編碼信息或者瀏覽器無(wú)法識(shí)別HTTP頭字段以及META元素中所聲明的字符編碼信息時(shí)，所有瀏覽器均會(huì)以各自在當(dāng)前語(yǔ)言版本下的默認(rèn)字符編碼顯示頁(yè)面。因?yàn)轫?yè)面自身的編碼為

GB2312，則Windows平臺(tái)下

IEFirefoxOpera

簡(jiǎn)體中文版的默認(rèn)字符編碼剛好為

GB2312，所以頁(yè)面中的字符顯示正常。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍編碼聲明在瀏覽器內(nèi)的容錯(cuò)影響看一組特殊的例子：<?phpheader("Content-Type:text/html;charset=maccyrillic");?><!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=b.i.g+5"/></head><bodystyle="font:24pxTahoma;">字符編碼---<script>document.write((document.charset||document.characterSet).toUpperCase());</script></body></html>IE6IE7IE8FirefoxChromeSafariOpera才絪絏---GB2312?r≤≈?s?X---X-MAC-CYRILLIC字符編碼---BIG5動(dòng)態(tài)頁(yè)面自身的編碼為

BIG5。IEFirefox

無(wú)法識(shí)別maccyrillic，也無(wú)法識(shí)別b.i.g+5，繼而采用了當(dāng)前語(yǔ)言版本的默認(rèn)編碼GB2312，與頁(yè)面自身的字符編碼

BIG5

不相符，導(dǎo)致頁(yè)面中的文字顯示異常。ChromeSafari

識(shí)別maccyrillic為合法的X-MAC-CYRILLIC。不再理會(huì)更低優(yōu)先級(jí)的編碼設(shè)置。Opera

無(wú)法識(shí)