關(guān)于渲染模式：
在多年以前（IE6誕生以前）戒突，各瀏覽器都處于各自比較封閉的發(fā)展中（基本沒(méi)有兼容性可談）幕随。
隨著WEB的發(fā)展竟趾，兼容性問(wèn)題的解決越來(lái)越顯得迫切顾瞻，隨即泼疑，各瀏覽器廠商發(fā)布了按照標(biāo)準(zhǔn)模式（遵循各廠商制定的統(tǒng)一標(biāo)準(zhǔn)）工作的瀏覽器，比如IE6就是其中之一朋其。
存在問(wèn)題：以前建設(shè)的網(wǎng)站并不支持標(biāo)準(zhǔn)模式
解決：各瀏覽器在加入標(biāo)準(zhǔn)模式的同時(shí)也保留了混雜模式
混雜模式：即以前那種未按照統(tǒng)一標(biāo)準(zhǔn)工作的模式王浴，也叫怪異模式
近似標(biāo)準(zhǔn)模式：在一種模式中同時(shí)融入標(biāo)準(zhǔn)模式和部分混雜模式的特性，也稱為接近標(biāo)準(zhǔn)模式梅猿、準(zhǔn)標(biāo)準(zhǔn)模式氓辣、最有限混雜模式
標(biāo)準(zhǔn)模式：近似標(biāo)準(zhǔn)模式、標(biāo)準(zhǔn)模式袱蚓、超級(jí)標(biāo)準(zhǔn)模式三者也共同被稱作標(biāo)準(zhǔn)模式
因此钞啸，瀏覽器的模式可以分為兩類：標(biāo)準(zhǔn)模式和混雜模式，其中喇潘，標(biāo)準(zhǔn)模式又可更嚴(yán)格的分為近似標(biāo)準(zhǔn)模式体斩、標(biāo)準(zhǔn)模式、超級(jí)標(biāo)準(zhǔn)模式颖低。
需要注意的是絮吵，不同廠商瀏覽器的標(biāo)準(zhǔn)模式也是有細(xì)微差別的（這是標(biāo)準(zhǔn)實(shí)現(xiàn)程度的問(wèn)題）。此外忱屑，同品牌不同版本瀏覽器的標(biāo)準(zhǔn)模式也是有差別的蹬敲，比如IE6&IE7時(shí)代的標(biāo)準(zhǔn)模式在現(xiàn)在看來(lái)或許已經(jīng)不那么標(biāo)準(zhǔn)了（IE8和IE9都在不斷的提高標(biāo)準(zhǔn)的實(shí)現(xiàn)程度，因此差距越來(lái)越大是必然的）莺戒，但盡管如此它們依然叫做標(biāo)準(zhǔn)模式伴嗡，畢竟它們?cè)谀莻€(gè)特定時(shí)代那個(gè)特定版本中確實(shí)是按照盡可能遵循標(biāo)準(zhǔn)的方式工作的。
什么是DOCTYPE：
DOCTYPE从铲，或者稱為 Document Type Declaration（文檔類型聲明瘪校，縮寫(xiě) DTD）。通常情況下名段，DOCTYPE 位于一個(gè) HTML 文檔的最前面的位置阱扬，位于根元素 HTML 的起始標(biāo)簽之前。這樣一來(lái)伸辟，在瀏覽器解析 HTML 文檔正文之前就可以確定當(dāng)前文檔的類型价认，以決定其需要采用的渲染模式（不同的渲染模式會(huì)影響到瀏覽器對(duì)于 CSS 代碼甚至 JavaScript 腳本的解析）。
DOCTYPE與各種模式的關(guān)系：
混雜模式：不寫(xiě)DOCTYPE
近似標(biāo)準(zhǔn)模式：HTML 4.01 XHTML 1.0 loose frameset transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
標(biāo)準(zhǔn)模式：HTML 4.01 XHTML 1.0 Strict
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我們可以看到自娩，過(guò)渡型或框架型HTML聲明與過(guò)渡型或框架型XHTML聲明均可使瀏覽器進(jìn)入近似標(biāo)準(zhǔn)模式用踩，同時(shí)，html5的DOCTYPE聲明和嚴(yán)格型HTML聲明以及嚴(yán)格型XHTML聲明則會(huì)使瀏覽器進(jìn)入標(biāo)準(zhǔn)模式忙迁。
更詳細(xì)說(shuō)明
三種模式下的表現(xiàn)差異：
混雜模式是不可取的脐彩，因?yàn)槠錄](méi)有兼容性可言。在IE（IE6~IE9）中姊扔，混雜模式即使用IE5.5內(nèi)核來(lái)解析并渲染頁(yè)面惠奸。
近似標(biāo)準(zhǔn)模式是在盡可能遵循標(biāo)準(zhǔn)的基礎(chǔ)上兼容部分非標(biāo)準(zhǔn)代碼，比如一些已經(jīng)棄用的標(biāo)簽等恰梢。
標(biāo)準(zhǔn)模式則是對(duì)統(tǒng)一標(biāo)準(zhǔn)實(shí)現(xiàn)最好的模式佛南，它要求標(biāo)簽必須閉合（唯一不需要閉合的就是DOCTYPE標(biāo)簽）梗掰，不能使用已經(jīng)廢棄的標(biāo)簽等等。目前嗅回，使用最多的DOCTYPE聲明為過(guò)渡型HTML或XHTML及穗，因?yàn)樗茏畲笤挼募嫒菀恍├洗a。不過(guò)绵载，技術(shù)領(lǐng)先的公司（比如google埂陆、facebook、twitter等都如此）都已經(jīng)使用了html5的DOCTYPE聲明娃豹，即<!DOCTYPE html>焚虱，它所觸發(fā)的模式與嚴(yán)格型HTML或嚴(yán)格型XHTML所觸發(fā)的模式完全相同，但好處是節(jié)省代碼且向前兼容（HTML5時(shí)代）懂版。
其它激活混雜模式的情況：
當(dāng)我們不寫(xiě)DOCTYPE聲明時(shí)鹃栽，所有瀏覽器都會(huì)進(jìn)入混雜模式。
也存在因其他情況而進(jìn)入混雜模式的時(shí)候躯畴，這些情況都是我們應(yīng)該避免的谍咆，最常見(jiàn)的就是在DOCTYPE聲明前面出現(xiàn)了這些內(nèi)容：普通文本、HTML 標(biāo)簽私股、HTML 注釋摹察、XML 聲明、IE條件注釋倡鲸。
對(duì)于普通文本和HTML標(biāo)簽供嚎，各瀏覽器均進(jìn)入了混雜模式，這個(gè)很好理解峭状，都看到疑似的HTML文檔正文了克滴，瀏覽器就不需要再往下追查DOCTYPE在哪里了。
對(duì)于HTML注釋和XML聲明优床，它們和上面的普通文本和HTML標(biāo)簽有些差別劝赔，它們不會(huì)在頁(yè)面中展示出來(lái)，即不可視胆敞。這時(shí)着帽，有的瀏覽器則顯得十分“智能”，非IE瀏覽器均會(huì)忽略它們的存在移层，DOCTYPE 被正確解析仍翰。但是在IE6中，DOCTYPE之前的 XML 聲明會(huì)導(dǎo)致頁(yè)面進(jìn)入混雜模式观话，而如果DOCTYPE之前出現(xiàn)了HTML注釋予借，則所有IE都會(huì)進(jìn)入混雜模式。有的作者很聰明，他既在DOCTYPE之前加入了他需要的內(nèi)容灵迫，卻又沒(méi)有使IE由于這些內(nèi)容而進(jìn)入混雜模式秦叛。他可能會(huì)這么寫(xiě)：
<![if !IE]><!-- some comments --><![endif]>
<![if false]><!-- some comments --><![endif]>
上面這些IE條件注釋在非IE瀏覽器中，可能完全被忽略瀑粥，可能被解釋為普通HTML注釋挣跋。但是在IE中它們?nèi)肯Я耍驗(yàn)檫@就是IE條件注釋的作用利凑。所以這也是目前比較合適的在DOCTYPE之前寫(xiě)點(diǎn)什么又保證所有瀏覽器均為標(biāo)準(zhǔn)模式的做法，但我們?nèi)匀?strong>不推薦在DOCTYPE之前加入任何非空白內(nèi)容嫌术。
用JS判斷瀏覽器當(dāng)前的模式：
document.write(document.compatMode == "CSS1Compat" ? "當(dāng)前處于標(biāo)準(zhǔn)模式" : "當(dāng)前處于混雜模式");
標(biāo)準(zhǔn)模式（嚴(yán)格）下和混雜模式（傳統(tǒng)）下的頁(yè)面渲染區(qū)別
（1 ）盒模型：
在混雜模式下，盒模型為IE盒模型，border-box
而在W3C標(biāo)準(zhǔn)的盒模型中為
（2）圖片元素的垂直對(duì)齊方式：
對(duì)于inline元素和table-cell元素了赌，標(biāo)準(zhǔn)模式下vertical-align屬性默認(rèn)取值為baseline
在怪異模式下table單元格中的圖片的vertical-align屬性默認(rèn)取值為bottom悟狱，因此在圖片底部會(huì)有及像素的空間。
（3）<table>元素中的字體：
CSS中磷籍，對(duì)于font的屬性都是可以繼承的适荣，怪異模式下，對(duì)于table元素院领，字體的某些元素將不會(huì)從body等其他封裝元素中繼承得到弛矛，特別是font-size屬性。
（4）內(nèi)聯(lián)元素的尺寸：
標(biāo)準(zhǔn)模式下比然，non-replaced inline元素?zé)o法自定義大小丈氓，怪異模式下，定義這些元素的width强法，height屬性可以影響這些元素顯示的尺寸万俗。
（5）元素的百分比高度：
a：CSS中對(duì)于元素的百分比高度規(guī)定如下：百分比為元素包含塊的高度，不可為負(fù)值饮怯，如果包含塊的高度沒(méi)有顯示給出闰歪，該值等同于auto，所以百分比的高度必須在父元素有高度聲明的情況下使用蓖墅。
b：當(dāng)一個(gè)元素使用百分比高度時(shí)库倘，標(biāo)準(zhǔn)模式下，高度取決于內(nèi)容變化论矾，怪異模式下于樟，百分比高度被正確應(yīng)用。
（6）元素溢出的處理：
標(biāo)準(zhǔn)模式下拇囊，overflow取默認(rèn)值visible迂曲，在怪異模式下，該溢出會(huì)被當(dāng)做擴(kuò)展box來(lái)對(duì)待寥袭，即元素的大小由其內(nèi)容決定路捧，溢出不會(huì)裁減关霸，元素框自動(dòng)調(diào)整，包含溢出內(nèi)容杰扫。
