WEB前端標準在各瀏覽器中的實現(xiàn)差異

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

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

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

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

AND

BLOCKFORMATTINGCONTEXTS

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

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

很彪悍'Layout'是IE的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關系和相互作用，以及對應用還有使用者的影響。MSDN"HasLayout"Overview:/en-us/library/bb250481(VS.85).aspxIE的haslayout與BlockFormattingContexts規(guī)范異同BlockFormattingContexts（塊格式化上下文）是W3CCSS2.1規(guī)范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。在BFC中，每一個元素左外邊與包含塊的左邊相接觸（對于從右到左的格式化，右外邊接觸右邊），即使存在浮動也是如此（盡管一個元素的內容區(qū)域會由于浮動而壓縮），除非這個元素也創(chuàng)建了一個新的BFC。浮動元素、絕對定位元素、inline-blocks、table-cells、table-captions以及'overflow'值不是'visible'的元素，會創(chuàng)建BFC?！咀ⅰ浚篊SS3中，將Blockformattingcontexts叫做flowroot。對于觸發(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的元素中，浮動元素參與高度的計算?！咀ⅰ?IE8標準文檔模式下觸發(fā)了haslayout特性的元素不再擁有"清理"浮動元素功能，它回歸了標準的BlockFormattingContexts規(guī)范

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

很彪悍IE的hasLayout與BlockFormattingContexts規(guī)范異同不能與浮動元素相互覆蓋特性：<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ī)范異同不能與浮動元素相互覆蓋特性：在觸發(fā)hasLayout的元素和創(chuàng)建了BlockFormattingContexts的元素中，浮動元素參與高度的計算?！咀ⅰ?IE8標準文檔模式下zoom:1不再觸發(fā)haslayout特性。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

很彪悍在標準文檔模式中，合理利用blockformatingcontext與IE的haslayout特性實現(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修復IE6bug*/</style><ol><li><strong>內容：</strong><p>“地球一小時”</p></li><li><strong>內容.內容：</strong><p>“地球一小時”</p></li><li><strong>內容.容：</strong><p>“地球一小時”</p></li><li><strong>內容.內容.內容：</strong><p>“地球一小時”</p></li></ol>歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

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

AND

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

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

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

確切

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

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

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

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

AND

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

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

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

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

很彪悍HTMLELEMENT=HTML的標簽屬性（ElementAttribute）+JS對象內屬性（ObjectProperty）<ElementAttributes/>+{JSObject:Propertys}DOMObject.*Attribute?方法用來對Element內String型屬性進行處理DOMObject.*方法用來對JSObjecte內property屬性進行處理歡迎到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導致以上問題出現(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ù)表達式邏輯語句中的函數(shù)定義會被轉換為函數(shù)表達式，這與它本身的優(yōu)化機制還有關系。先來看對邏輯語句的優(yōu)化：functionfoo(){if(true){functionA(){alert('A')}}else{functionA(){alert('B')}}A();}foo();alert(foo);歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

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

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

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

很彪悍tracemonkey的條件函數(shù)表達式這就沒問題了么？還是看看結果吧：！?。?？?。o語了==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ù)表達式實際上問題是這樣的：JS引擎在處理腳本程序之前會對內容作語法整理，由于JS內沒有塊級作用域，函數(shù)聲明會被提高到當前執(zhí)行塊(Global或Function)的頂端執(zhí)行。語法樹整理后代碼：functionfoo(){functionA(){alert('A')};functionA(){alert('B')};if(1===1){}else{}A();}同名函數(shù)A覆蓋前面的函數(shù)A，導致執(zhí)行結果為B。歡迎到CSDN的跨瀏覽開發(fā)論壇發(fā)帖^_^版主WebAdvocate

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

INTHEBROWSERAFFECTS

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

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

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

Content-Type:text/html;charset=ISO-8859-1META聲明中"http-equiv"為"Content-Type"對應的值中的"charset"的值。

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

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

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

GB2312。當頁面沒有設置任何字符編碼信息或者瀏覽器無法識別HTTP頭字段以及META元素中所聲明的字符編碼信息時，所有瀏覽器均會以各自在當前語言版本下的默認字符編碼顯示頁面。因為頁面自身的編碼為

GB2312，則Windows平臺下

IEFirefoxOpera

簡體中文版的默認字符編碼剛好為

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

很彪悍編碼聲明在瀏覽器內的容錯影響看一組特殊的例子：<?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動態(tài)頁面自身的編碼為

BIG5。IEFirefox

無法識別maccyrillic，也無法識別b.i.g+5，繼而采用了當前語言版本的默認編碼GB2312，與頁面自身的字符編碼

BIG5

不相符，導致頁面中的文字顯示異常。ChromeSafari

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

無法識