什么是瀏覽器的兼容問(wèn)題：
同一份代碼有的瀏覽器效果正常，有的不正常。由于不同的瀏覽器對(duì)CSS的支持及解析結(jié)果不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果
不正常的原因：
1掖蛤、瀏覽器不支持，新屬性井厌、框架
2蚓庭、同一瀏覽器產(chǎn)品，版本越老bug越多
3仅仆、同一瀏覽器產(chǎn)品器赞，版本越新，功能越多
4墓拜、不同瀏覽器產(chǎn)品港柜，不同標(biāo)準(zhǔn)，不同實(shí)現(xiàn)方式
什么是 CSS hack
CSS hack是通過(guò)在CSS樣式中加入一些特殊的符號(hào)咳榜，讓不同的瀏覽器識(shí)別不同的符號(hào)（什么樣的瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的夏醉，CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同的CSS樣式的目的涌韩，比如.kwstu{width:300px;_width:200px;}畔柔，一般瀏覽器會(huì)先給元素使用width:300px;的樣式，緊接著后面還有個(gè)_width:200px;由于下劃線(xiàn)_width只有IE6可以識(shí)別臣樱，所以此樣式在IE6中實(shí)際設(shè)置對(duì)象的寬度為200px靶擦，后面的把前面的給覆蓋了腮考，而其他瀏覽器不識(shí)別_width不會(huì)執(zhí)行_width:200px;這句樣式，所以在其他瀏覽器中設(shè)置對(duì)象的寬度就是300px;
簡(jiǎn)單地講玄捕，css hack指各版本及各品牌瀏覽器之間對(duì)CSS解釋后出現(xiàn)網(wǎng)頁(yè)內(nèi)容的誤差(比如我們常說(shuō)錯(cuò)位)的處理秸仙。由于各瀏覽器的內(nèi)核不同，所以會(huì)造成一些誤差就像JS一樣桩盲，一個(gè)JS網(wǎng)頁(yè)特效，在微軟IE6席吴、IE7赌结、IE8瀏覽器有效果，但可能在火狐（Mozilla Firefox）谷歌瀏覽器無(wú)效孝冒，這樣就叫做JS hack 柬姚，所以我們對(duì)于CSS來(lái)說(shuō)他們來(lái)解決各瀏覽器對(duì)CSS解釋不同所采取的區(qū)別不同瀏覽器制作不同的CSS樣式的設(shè)置來(lái)解決這些問(wèn)題就叫作CSS Hack。
瀏覽器識(shí)別字符標(biāo)準(zhǔn)對(duì)應(yīng)表如下圖：
從上圖可以分析出以下幾種情況：
1庄涡、大部分特殊字符IE瀏覽器支持量承，其他主流瀏覽器firefox，chrome穴店，opera撕捍，safari不支持 (opera可識(shí)別除外)。
2泣洞、\9 ：所有IE瀏覽器都支持
3忧风、_和- ：僅IE6支持
4、* ：IE6球凰、E7支持
5狮腿、\0 ：IE8、IE9支持呕诉，opera部分支持
6缘厢、\9\0 ：IE8部分支持、IE9支持
7甩挫、\0\9 ：IE8贴硫、IE9支持
IE瀏覽器下hack總結(jié)
element{
color：#666\9； //IE8 IE9
* color：#999伊者； //IE7
_color:#EBEBEB夜畴； //IE6
}
可以看出，利用字符識(shí)別無(wú)法區(qū)分IE8和IE9删壮，我們可以從偽類(lèi)的識(shí)別來(lái)區(qū)分
element{
color：#666\9贪绘； //IE8
* color：#999； //IE7
_color:#EBEBEB央碟； //IE6
}
:root element{color：#666\9;}//IE9
【說(shuō)明】：“:root”偽類(lèi)IE系列只有IE9支持税灌，其他主流瀏覽器均支持均函，利用這一點(diǎn)來(lái)區(qū)分IE8和IE9。另外考慮到opera部分支持菱涤，完全支持:root,所以不使用苞也。
談一談瀏覽器兼容的思路
1、從產(chǎn)品的角度和成本的角度來(lái)判斷要不要做瀏覽器兼容
產(chǎn)品的受眾粘秆？受眾使用的瀏覽器的比例如迟。產(chǎn)品的效果優(yōu)先還是基本功能優(yōu)先？以及你做這件事情的成本攻走，時(shí)間成本等來(lái)判斷是否要做這件事情殷勘。
2、如果做的話(huà)要做到什么程度昔搂？
你要考慮讓那些瀏覽器支持哪些效果玲销。
3、如何做摘符？
根據(jù)兼容需求選擇技術(shù)框架贤斜、庫(kù)（jQuery。逛裤。瘩绒。。）
根據(jù)兼容需求選擇兼容工具(html5shiv.js带族、respond.js草讶、css reset、normalize.css炉菲、Modernizr)
postCSS
條件注釋堕战、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
列舉5種以上瀏覽器兼容的寫(xiě)法
1.區(qū)別IE和非IE瀏覽器
#tip{
background:blue;/非IE背景藍(lán)色 因?yàn)樗袨g覽器都能解釋/
background:red\9;/IE6拍霜、IE7嘱丢、IE8、IE9背景紅色 因?yàn)閈9在IE6.7.8.9中可以識(shí)別祠饺，覆蓋上面樣式 IE10跟11應(yīng)該不識(shí)別越驻，IE11測(cè)試確定/
}
2.區(qū)別IE6,IE7,IE8,FF
【區(qū)別符號(hào)】：“\9”、“”道偷、“_”
#tip{
background:blue;/Firefox背景變藍(lán)色 所有瀏覽器都支持/
background:red\9;/IE8背景變紅色 IE6缀旁、7、8勺鸦、9支持覆蓋上面樣式/
background:black;/IE7背景變黑色 IE6并巍、7支持又一次覆蓋上面樣式/
_background:orange;/IE6背景變橘色 緊IE6支持又一次覆蓋上面樣式/
}
3、條件注釋法：
<script>alert(1);</script>
4换途、屬性前綴法：
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
5懊渡、CSS Reset
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語(yǔ)句刽射。條件注釋可被用來(lái)向 Internet Explorer 提供及隱藏代碼
IE Hack
使用特殊的符號(hào)或者方式寫(xiě)出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法剃执、選擇器前綴法以及IE條件注釋法
js 能力檢測(cè)
使用JS的語(yǔ)法檢測(cè)瀏覽器支持的屬性誓禁，以便展示效果
html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題肾档。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢(xún)摹恰。
css reset
通過(guò)重新定義標(biāo)簽樣式，“覆蓋”瀏覽器的CSS默認(rèn)屬性
normalize.css
Normalize.css 只是一個(gè)很小的CSS文件怒见，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性俗慈。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的速种、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。
Modernizr
Modernizr是一個(gè) JavaScript 庫(kù)低千，用于檢測(cè)用戶(hù)瀏覽器的 HTML5 與 CSS3 特性配阵。
postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗(yàn)?zāi)愕腃SS示血、支持變量和混合棋傍，轉(zhuǎn)化css3的新特性語(yǔ)法、行內(nèi)圖片等难审。
一般在哪個(gè)網(wǎng)站查詢(xún)屬性兼容性瘫拣？
CSS屬性兼容查詢(xún)網(wǎng)站：http://caniuse.com/
