整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是 JS 引擎。渲染引擎在不同的瀏覽器中也不是都相同的。目前市面上常見的瀏覽器內(nèi)核可以分為這四種：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。這里面大家最耳熟能詳?shù)目赡芫褪?Webkit 內(nèi)核了，Webkit 內(nèi)核是當(dāng)下瀏覽器世界真正的霸主。
本文我們就以 Webkit 為例，對現(xiàn)代瀏覽器的渲染過程進(jìn)行一個(gè)深度的剖析。
想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub 博客。
在介紹瀏覽器渲染過程之前，我們簡明扼要介紹下頁面的加載過程，有助于更好理解后續(xù)渲染過程。
要點(diǎn)如下：
例如在瀏覽器輸入https://juejin.im/timeline，然后經(jīng)過 DNS 解析，juejin.im對應(yīng)的 IP 是36.248.217.149（不同時(shí)間、地點(diǎn)對應(yīng)的 IP 可能會(huì)不同）。然后瀏覽器向該 IP 發(fā)送 HTTP 請求。
服務(wù)端接收到 HTTP 請求，然后經(jīng)過計(jì)算（向不同的用戶推送不同的內(nèi)容），返回 HTTP 請求，返回的內(nèi)容如下：
其實(shí)就是一堆 HMTL 格式的字符串，因?yàn)橹挥?HTML 格式瀏覽器才能正確解析，這是 W3C 標(biāo)準(zhǔn)的要求。接下來就是瀏覽器的渲染過程。
瀏覽器渲染過程大體分為如下三部分：
1）瀏覽器會(huì)解析三個(gè)東西：
一是 HTML/SVG/XHTML，HTML 字符串描述了一個(gè)頁面的結(jié)構(gòu)，瀏覽器會(huì)把 HTML 結(jié)構(gòu)字符串解析轉(zhuǎn)換 DOM 樹形結(jié)構(gòu)。
二是 CSS，解析 CSS 會(huì)產(chǎn)生 CSS 規(guī)則樹，它和 DOM 結(jié)構(gòu)比較像。
三是 Javascript 腳本，等到 Javascript 腳本文件加載后， 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree。
2）解析完成后，瀏覽器引擎會(huì)通過 DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。
3）最后通過調(diào)用操作系統(tǒng) Native GUI 的 API 繪制。
接下來我們針對這其中所經(jīng)歷的重要步驟詳細(xì)闡述
瀏覽器會(huì)遵守一套步驟將 HTML 文件轉(zhuǎn)換為 DOM 樹。宏觀上，可以分為幾個(gè)步驟：
瀏覽器從磁盤或網(wǎng)絡(luò)讀取 HTML 的原始字節(jié)，并根據(jù)文件的指定編碼（例如 UTF-8）將它們轉(zhuǎn)換成字符串。
在網(wǎng)絡(luò)中傳輸?shù)膬?nèi)容其實(shí)都是 0 和 1 這些字節(jié)數(shù)據(jù)。當(dāng)瀏覽器接收到這些字節(jié)數(shù)據(jù)以后，它會(huì)將這些字節(jié)數(shù)據(jù)轉(zhuǎn)換為字符串，也就是我們寫的代碼。
將字符串轉(zhuǎn)換成 Token，例如：<html>、<body>等。Token 中會(huì)標(biāo)識出當(dāng)前 Token 是“開始標(biāo)簽”或是“結(jié)束標(biāo)簽”亦或是“文本”等信息。
這時(shí)候你一定會(huì)有疑問，節(jié)點(diǎn)與節(jié)點(diǎn)之間的關(guān)系如何維護(hù)？
事實(shí)上，這就是 Token 要標(biāo)識“起始標(biāo)簽”和“結(jié)束標(biāo)簽”等標(biāo)識的作用。例如“title”Token 的起始標(biāo)簽和結(jié)束標(biāo)簽之間的節(jié)點(diǎn)肯定是屬于“head”的子節(jié)點(diǎn)。
上圖給出了節(jié)點(diǎn)之間的關(guān)系，例如：“Hello”Token 位于“title”開始標(biāo)簽與“title”結(jié)束標(biāo)簽之間，表明“Hello”Token 是“title”Token 的子節(jié)點(diǎn)。同理“title”Token 是“head”Token 的子節(jié)點(diǎn)。
事實(shí)上，構(gòu)建 DOM 的過程中，不是等所有 Token 都轉(zhuǎn)換完成后再去生成節(jié)點(diǎn)對象，而是一邊生成 Token 一邊消耗 Token 來生成節(jié)點(diǎn)對象。換句話說，每個(gè) Token 被生成后，會(huì)立刻消耗這個(gè) Token 創(chuàng)建出節(jié)點(diǎn)對象。注意：帶有結(jié)束標(biāo)簽標(biāo)識的 Token 不會(huì)創(chuàng)建節(jié)點(diǎn)對象。
接下來我們舉個(gè)例子，假設(shè)有段 HTML 文本：
復(fù)制代碼
<html> <head> <title>Web page parsing</title> </head> <body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div> </body> </html>
上面這段 HTML 會(huì)解析成這樣：
DOM 會(huì)捕獲頁面的內(nèi)容，但瀏覽器還需要知道頁面如何展示，所以需要構(gòu)建 CSSOM。
構(gòu)建 CSSOM 的過程與構(gòu)建 DOM 的過程非常相似，當(dāng)瀏覽器接收到一段 CSS，瀏覽器首先要做的是識別出 Token，然后構(gòu)建節(jié)點(diǎn)并生成 CSSOM。
在這一過程中，瀏覽器會(huì)確定下每一個(gè)節(jié)點(diǎn)的樣式到底是什么，并且這一過程其實(shí)是很消耗資源的。因?yàn)闃邮侥憧梢宰孕性O(shè)置給某個(gè)節(jié)點(diǎn)，也可以通過繼承獲得。在這一過程中，瀏覽器得遞歸 CSSOM 樹，然后確定具體的元素到底是什么樣式。
注意：CSS 匹配 HTML 元素是一個(gè)相當(dāng)復(fù)雜和有性能問題的事情。所以，DOM 樹要小，CSS 盡量用 id 和 class，千萬不要過渡層疊下去。
當(dāng)我們生成 DOM 樹和 CSSOM 樹以后，就需要將這兩棵樹組合為渲染樹。
在這一過程中，不是簡單的將兩者合并就行了。渲染樹只會(huì)包括需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式信息，如果某個(gè)節(jié)點(diǎn)是 display: none 的，那么就不會(huì)在渲染樹中顯示。
我們或許有個(gè)疑惑：瀏覽器如果渲染過程中遇到 JS 文件怎么處理？
渲染過程中，如果遇到<script>就停止渲染，執(zhí)行 JS 代碼。因?yàn)闉g覽器有 GUI 渲染線程與 JS 引擎線程，為了防止渲染出現(xiàn)不可預(yù)期的結(jié)果，這兩個(gè)線程是互斥的關(guān)系。JavaScript 的加載、解析與執(zhí)行會(huì)阻塞 DOM 的構(gòu)建，也就是說，在構(gòu)建 DOM 時(shí)，HTML 解析器若遇到了 JavaScript，那么它會(huì)暫停構(gòu)建 DOM，將控制權(quán)移交給 JavaScript 引擎，等 JavaScript 引擎運(yùn)行完畢，瀏覽器再從中斷的地方恢復(fù) DOM 構(gòu)建。
也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件，這也是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因。當(dāng)然在當(dāng)下，并不是說 script 標(biāo)簽必須放在底部，因?yàn)槟憧梢越o script 標(biāo)簽添加 defer 或者 async 屬性（下文會(huì)介紹這兩者的區(qū)別）。
JS 文件不只是阻塞 DOM 的構(gòu)建，它會(huì)導(dǎo)致 CSSOM 也阻塞 DOM 的構(gòu)建。
原本 DOM 和 CSSOM 的構(gòu)建是互不影響，井水不犯河水，但是一旦引入了 JavaScript，CSSOM 也開始阻塞 DOM 的構(gòu)建，只有 CSSOM 構(gòu)建完畢后，DOM 再恢復(fù) DOM 構(gòu)建。
這是什么情況？
這是因?yàn)?JavaScript 不只是可以改 DOM，它還可以更改樣式，也就是它可以更改 CSSOM。因?yàn)椴煌暾?CSSOM 是無法使用的，如果 JavaScript 想訪問 CSSOM 并更改它，那么在執(zhí)行 JavaScript 時(shí)，必須要能拿到完整的 CSSOM。所以就導(dǎo)致了一個(gè)現(xiàn)象，如果瀏覽器尚未完成 CSSOM 的下載和構(gòu)建，而我們卻想在此時(shí)運(yùn)行腳本，那么瀏覽器將延遲腳本執(zhí)行和 DOM 構(gòu)建，直至其完成 CSSOM 的下載和構(gòu)建。也就是說，在這種情況下，瀏覽器會(huì)先下載和構(gòu)建 CSSOM，然后再執(zhí)行 JavaScript，最后在繼續(xù)構(gòu)建 DOM。
當(dāng)瀏覽器生成渲染樹以后，就會(huì)根據(jù)渲染樹來進(jìn)行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是要弄清楚各個(gè)節(jié)點(diǎn)在頁面中的確切位置和大小。通常這一行為也被稱為“自動(dòng)重排”。
布局流程的輸出是一個(gè)“盒模型”，它會(huì)精確地捕獲每個(gè)元素在視口內(nèi)的確切位置和尺寸，所有相對測量值都將轉(zhuǎn)換為屏幕上的絕對像素。
布局完成后，瀏覽器會(huì)立即發(fā)出“Paint Setup”和“Paint”事件，將渲染樹轉(zhuǎn)換成屏幕上的像素。
以上我們詳細(xì)介紹了瀏覽器工作流程中的重要步驟，接下來我們討論幾個(gè)相關(guān)的問題：
1.async 和 defer 的作用是什么？有什么區(qū)別?
接下來我們對比下 defer 和 async 屬性的區(qū)別：
其中藍(lán)色線代表 JavaScript 加載；紅色線代表 JavaScript 執(zhí)行；綠色線代表 HTML 解析。
1）情況 1<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
2）情況 2<script async src="script.js"></script> (異步下載)
async 屬性表示異步執(zhí)行引入的 JavaScript，與 defer 的區(qū)別在于，如果已經(jīng)加載好，就會(huì)開始執(zhí)行——無論此刻是 HTML 解析階段還是 DOMContentLoaded 觸發(fā)之后。需要注意的是，這種方式加載的 JavaScript 依然會(huì)阻塞 load 事件。換句話說，async-script 可能在 DOMContentLoaded 觸發(fā)之前或之后執(zhí)行，但一定在 load 觸發(fā)之前執(zhí)行。
3）情況 3 <script defer src="script.js"></script>(延遲執(zhí)行)
defer 屬性表示延遲執(zhí)行引入的 JavaScript，即這段 JavaScript 加載時(shí) HTML 并未停止解析，這兩個(gè)過程是并行的。整個(gè) document 解析完畢且 defer-script 也加載完成之后（這兩件事情的順序無關(guān)），會(huì)執(zhí)行所有由 defer-script 加載的 JavaScript 代碼，然后觸發(fā) DOMContentLoaded 事件。
defer 與相比普通 script，有兩點(diǎn)區(qū)別：載入 JavaScript 文件時(shí)不阻塞 HTML 的解析，執(zhí)行階段被放到 HTML 標(biāo)簽解析完成之后。
在加載多個(gè) JS 腳本的時(shí)候，async 是無順序的加載，而 defer 是有順序的加載。
2. 為什么操作 DOM 慢？
把 DOM 和 JavaScript 各自想象成一個(gè)島嶼，它們之間用收費(fèi)橋梁連接。——《高性能 JavaScript》
JS 是很快的，在 JS 中修改 DOM 對象也是很快的。在 JS 的世界里，一切是簡單的、迅速的。但 DOM 操作并非 JS 一個(gè)人的獨(dú)舞，而是兩個(gè)模塊之間的協(xié)作。
因?yàn)?DOM 是屬于渲染引擎中的東西，而 JS 又是 JS 引擎中的東西。當(dāng)我們用 JS 去操作 DOM 時(shí)，本質(zhì)上是 JS 引擎和渲染引擎之間進(jìn)行了“跨界交流”。這個(gè)“跨界交流”的實(shí)現(xiàn)并不簡單，它依賴了橋接接口作為“橋梁”（如下圖）。
過“橋”要收費(fèi)——這個(gè)開銷本身就是不可忽略的。我們每操作一次 DOM（不管是為了修改還是僅僅為了訪問其值），都要過一次“橋”。過“橋”的次數(shù)一多，就會(huì)產(chǎn)生比較明顯的性能問題。因此“減少 DOM 操作”的建議，并非空穴來風(fēng)。
3. 你真的了解回流和重繪嗎？
渲染的流程基本上是這樣（如下圖黃色的四個(gè)步驟）：
1. 計(jì)算 CSS 樣式
2. 構(gòu)建 Render Tree
3.Layout – 定位坐標(biāo)和大小
4. 正式開畫
注意：上圖流程中有很多連接線，這表示了 Javascript 動(dòng)態(tài)修改了 DOM 屬性或是 CSS 屬性會(huì)導(dǎo)致重新 Layout，但有些改變不會(huì)重新 Layout，就是上圖中那些指到天上的箭頭，比如修改后的 CSS rule 沒有被匹配到元素。
這里重要要說兩個(gè)概念，一個(gè)是 Reflow，另一個(gè)是 Repaint
重繪：當(dāng)我們對 DOM 的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)，瀏覽器不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式（跳過了上圖所示的回流環(huán)節(jié)）。
回流：當(dāng)我們對 DOM 的修改引發(fā)了 DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響），然后再將計(jì)算的結(jié)果繪制出來，這個(gè)過程就是回流（也叫重排）。
我們知道，當(dāng)網(wǎng)頁生成的時(shí)候，至少會(huì)渲染一次。在用戶訪問的過程中，還會(huì)不斷重新渲染。重新渲染會(huì)重復(fù)回流 + 重繪或者只有重繪。
回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流。重繪和回流會(huì)在我們設(shè)置節(jié)點(diǎn)樣式時(shí)頻繁出現(xiàn)，同時(shí)也會(huì)很大程度上影響性能。回流所需的成本比重繪高的多，改變父節(jié)點(diǎn)里的子節(jié)點(diǎn)很可能會(huì)導(dǎo)致父節(jié)點(diǎn)的一系列回流。
1）常見引起回流屬性和方法
任何會(huì)改變元素幾何信息 (元素的位置和尺寸大小) 的操作，都會(huì)觸發(fā)回流，
2）常見引起重繪屬性和方法
3）如何減少回流、重繪
復(fù)制代碼
for(let i = 0; i < 1000; i++) {
// 獲取 offsetTop 會(huì)導(dǎo)致回流，因?yàn)樾枰カ@取正確的值
console.log(document.querySelector('.test').style.offsetTop)
}
基于上面介紹的瀏覽器渲染原理，DOM 和 CSSOM 結(jié)構(gòu)構(gòu)建順序，初始化可以對頁面渲染做些優(yōu)化，提升頁面性能。
綜上所述，我們得出這樣的結(jié)論：
參考文章
更多內(nèi)容，請關(guān)注前端之巔。
今天課堂筆記主要講的是HTML5零基礎(chǔ)需要學(xué)習(xí)和掌握的知識點(diǎn)，我們一起來看主要培訓(xùn)課程內(nèi)容：
1)CSS Bug:CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
2)CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€(gè)人對CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。
3)Filter:表示過濾器的意思，它是一種對特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型。
*使用Hack帶來的一些副作用
降低了CSS代碼的可讀性，增加了代碼的負(fù)擔(dān)。
*設(shè)計(jì)CSS Hack和 Filter通常有兩種方法
1)一種是利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明;
2)另一種是利用瀏覽器對CSS支持的不完善，如對某些規(guī)則或語法還沒有形成支持，來隱藏或顯示樣式。
IE6常見CSS解析Bug及hack
1)圖片間隙
A)在元素中直接插入圖片時(shí)，圖片下方會(huì)產(chǎn)生約3像素的間隙(該bug出現(xiàn)在IE6及更低版本中)
hack1:將
#FormatImgID_0#轉(zhuǎn)為塊狀元素，給#FormatImgID_1#添加聲明：display:block;
hack2:將img設(shè)置vertical-align:top/middle/bottom;只要不為baseline
2) 雙倍浮向(雙倍邊距)
描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界加倍顯示。
hack:給浮動(dòng)元素添加聲明：display:inline;
3)默認(rèn)高度(IE6)
描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度(低于16px高度)
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
4)百分比bug
描述：在IE6及以下版本中在解析百分比時(shí)，會(huì)按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。
hack:給右面的浮動(dòng)元素添加聲明：clear:right; 意思：清除右浮動(dòng)。
5)表單元素高度及對齊方式不一致(IE,MOZ,C,O,S)
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;或vertical-align:top;
2)表單元素中按鈕的解析是按怪異盒模型解析的。
3)直接去掉表單控件的邊框時(shí)用border:0;border:none;不能兼容ie7以下瀏覽器。
*透明寫法
1.opacity:0~1;IE8以上的瀏覽器
2.filter:alpha(opacity=1~100); IE9及IE9以下的瀏覽器
6)列表階梯BUG(IE6及更低版本的瀏覽器中)
bug1:在給的子元素中使用了Float:left;父元素中沒有設(shè)置浮動(dòng)屬性，li階梯狀效果。
hack:給父元素設(shè)置浮動(dòng)便能解決此問題
bug2:當(dāng)給LI里的A轉(zhuǎn)成塊元素，并設(shè)置了固定高度時(shí)，且給父元素寫了浮動(dòng)后在IE6及更低的版本瀏覽器里會(huì)出現(xiàn)垂直顯示。
hack:給a也設(shè)置左浮動(dòng)便可解決。
8)鼠標(biāo)指針bug
描述：cursor屬性的hand屬性值只有IE瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識別該聲明。
hack:如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，應(yīng)添加聲明：cursor:pointer;
擴(kuò)展內(nèi)容：
鼠標(biāo)指針
cursor:crosshair(十字架)
pointer(手形)
move(移動(dòng))
e-resize(左右方向)
ne-resize(向右及向上移動(dòng))
nw-resize(向上及向左移動(dòng))
n-resize(向上移動(dòng))
se-resize(向下及向右)
sw-resize(向下及向左)
s-resize(向下移動(dòng))
w-resize(向左移動(dòng))
text(文本)
wait(等待狀態(tài))
help(幫助)
瀏覽器大戰(zhàn)
第一次瀏覽器大戰(zhàn)發(fā)生在上個(gè)世紀(jì)90年代，微軟發(fā)布了它的IE瀏覽器，和網(wǎng)景公司的Netscape Navigator瀏覽器大打出手。 ?
第二次瀏覽器大戰(zhàn)發(fā)生在20世紀(jì)。 ?
戰(zhàn)爭產(chǎn)物：Internet Explorer 9
元老級內(nèi)核之一，由微軟開發(fā)，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優(yōu)勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進(jìn)步，長期以往，Trident內(nèi)核一度停滯不前，更新緩慢，甚至一度與W3C標(biāo)準(zhǔn)脫節(jié)。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經(jīng)常會(huì)看到有些網(wǎng)站在瀏覽時(shí)會(huì)提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會(huì)考慮ie 8之前的瀏覽器了。
元老級內(nèi)核之一，由Netscape公司Mozilla組織開發(fā)。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發(fā)新一代內(nèi)核，后命名為“Gecko”。FireFox也是這班人開發(fā)出來了，因此這也就是Mozilla一直使用的內(nèi)核。 Gecko的特點(diǎn)是代碼完全公開，因此其開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
這是蘋果公司開發(fā)的內(nèi)核，也是其旗下產(chǎn)品Ssfari瀏覽器使用的內(nèi)核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)開發(fā)。 Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內(nèi)核（在腳本理解方面，Chorome使用自己研發(fā)的V8引擎）。
這是由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計(jì)算將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個(gè)分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用
由于各大主流瀏覽器由不同的廠家開發(fā)，所用的核心架構(gòu)和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯(cuò)誤）提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘，都讓CSS應(yīng)用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。
1)圖片有邊框BUG
當(dāng)圖片加<a href=“#”></a>在IE上會(huì)出現(xiàn)邊框
Hack:給圖片加border:0;或者border:0 none;
2)圖片間隙
div中的圖片間隙BUG
描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大大約三像素。
hack1:將</div>與<img>寫在一行上；
hack2:將<img>轉(zhuǎn)為塊狀元素，給<img>添加聲明：display:block;
3) 雙倍浮向（雙倍邊距）（只有IE6出現(xiàn)）
描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界（margin）加倍顯示。
hack:給浮動(dòng)元素添加聲明：display:inline;
4)默認(rèn)高度（IE6、IE7）
描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度（在16px左右；）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
5)表單元素對齊不一致
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;
6)按鈕元素默認(rèn)大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1： 統(tǒng)一大小/（用a標(biāo)記模擬）
hack2:input外邊套一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽里寫按鈕的樣式，把input的邊框去掉。
hack3:如果這個(gè)按鈕是一個(gè)圖片，直接把圖片作為按鈕的背景圖即可。
7)鼠標(biāo)指針bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識別該聲明。
hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，
應(yīng)添加聲明：cursor:pointer cursor: ;
auto默認(rèn)
crosshair加號
text文本
wait等待
help幫助
progress過程
inherit繼承
move移動(dòng)
ne-resize向上或向右移動(dòng)
pointer手形
8)透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數(shù))
1.下劃線屬性過濾器
當(dāng)在一個(gè)屬性前面增加了一個(gè)下劃線后，由于符合標(biāo)準(zhǔn)的瀏覽器不能識別帶有下劃線的屬性而忽略了這個(gè)聲明，但是在IE6及更低版本瀏覽器中會(huì)繼續(xù)解析這個(gè)規(guī)則。
語法：選擇符{_屬性：屬性值；}
2. !important
關(guān)鍵字過濾器 它表示所附加的聲明具有最高優(yōu)先級的意思。但由于IE6及更低版本不能識別它， 我們可以利用IE6的這個(gè)Bug作為過濾器來兼容ＩＥ６和其它標(biāo)準(zhǔn)瀏覽器。
語法：選擇符{屬性：屬性值!important;}
3. *屬性過濾器
當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬 性的作用。
語法：選擇符{*屬性：屬性值；}
4. ：IE版本識別；其它瀏覽器都不識別
語法：選擇符{屬性：屬性值;}
5. >5. \0 : IE8 及以上版本識別；其它瀏覽器都不識別
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
