2016/6/6
可以裝個(gè)虛擬機(jī)，用于調(diào)試IE的兼容
1.如何調(diào)試 IE 瀏覽器
- IE瀏覽器7以上+自帶的開(kāi)發(fā)者工具泻轰，ie6可以用加border的方法
- 采用模擬器的方式去模不同版本下的IE瀏覽器，如ietester
- 通過(guò)安裝虛擬機(jī)的方式藻糖，安裝不同版本的IE的運(yùn)行環(huán)境去達(dá)到調(diào)試IE瀏覽器的目的
2.什么是CSS hack？在 CSS 和 HTML里如何寫(xiě) hack逢净？在 CSS 中 ie6钥庇、ie7的 hack 方式牍鞠？
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等上沐，或者是同一廠商的瀏覽器的不同版本皮服，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣参咙，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣龄广，得不到我們所需要的頁(yè)面效果。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS蕴侧，讓它能夠同時(shí)兼容不同的瀏覽器择同，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。 簡(jiǎn)單的說(shuō)净宵，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器敲才。當(dāng)然，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果择葡。
CSS Hack大致有3種表現(xiàn)形式紧武，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack敏储，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的阻星。
1.屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" "，IE7能識(shí)別星號(hào)" "已添，但不能識(shí)別下劃線""妥箕，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)
2.選擇器前綴法(即選擇器Hack)：例如 IE6能識(shí)別html .class{}更舞，IE7能識(shí)別+html .class{}或者*:first-child+html .class{}
3.IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 畦幢，針對(duì)IE6及以下版本： 。這類Hack不僅對(duì)CSS生效缆蝉，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效
<!-[if IE]>這段文字只是在IE瀏覽器下顯示<![endif]->
<!-[if IE6]>這段文字只是在IE6顯示器生效<![endif]->
<!-[if get IE6]>這段文字只是在IE6以上（包括）版本IE瀏覽器顯示<![endif]->
<!-[if 宇葱！IE8]>這段文字在非IE瀏覽器下顯示<![endif]>
<!-[if ！ IE]>這段文字只是在非IE瀏覽器下顯示<![endif]>
參考資料
3.列舉幾種 瀏覽器兼容問(wèn)題
- hover IE6不支持刊头，以上的IE只支持a標(biāo)簽的hover
- display:inline-block ie67不支持贝搁。
- max-height,max-width等一系列，IE6不支持
- padding,margin在不同瀏覽器默認(rèn)樣式有差異
- 在ie6下塊元素有浮動(dòng)和橫向margin值芽偏，橫向的margin值會(huì)被放大成2倍，解決方法：display:inline
- 在ie6下父級(jí)有邊框的時(shí)候弦讽，子元素的margin值消失污尉，解決方法：觸發(fā)haslayout
4.針對(duì)兼容膀哲、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思被碗？
看法：對(duì)于兼容有有的放矢某宪，分清主次，針對(duì)主流瀏覽器去開(kāi)發(fā)锐朴，同時(shí)要兼顧用戶需求兴喂，遇到一個(gè)問(wèn)題解決一個(gè)，先完成基本功能和樣式的實(shí)現(xiàn)焚志，再完善細(xì)節(jié)衣迷。
優(yōu)雅降級(jí)：在前面的開(kāi)發(fā)中，先不用考慮一些低的版本的瀏覽器酱酬，等開(kāi)發(fā)完成之后慢慢地去做一個(gè)適應(yīng)壶谒，只要頁(yè)面還正常，不亂膳沽，看著還可以就OK了汗菜，沒(méi)必要去追求特別高的還原度。
漸進(jìn)增強(qiáng)：先針對(duì)ie6去做開(kāi)發(fā)挑社，再對(duì)一些好的瀏覽器增加一些額外的一些效果陨界，讓它看起來(lái)更好看一些。
5.reset.css和normalize.css分別是做什么的痛阻？為什么推薦使用 nomalize.css?
- reset.css:是用于去除瀏覽器預(yù)先給標(biāo)簽設(shè)置的默認(rèn)樣式菌瘪。
- normalize.css:normalize.css是reset.css的改良版，他是在reset的基礎(chǔ)上進(jìn)行改良避免誤傷录平，保留了一些有價(jià)值的默認(rèn)樣式麻车，還增加了其他功能，也沒(méi)有reset.css 的一些缺點(diǎn)斗这。
- 為什么使用nomalize.css?
- Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值,這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式动猬。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合表箭。
- Normalize.css 修復(fù)了瀏覽器的bug
- Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
- Normalize.css 是模塊化的
- Normalize.css 擁有詳細(xì)的文檔
參考資料
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
- IE盒模型：寬度=內(nèi)容寬度+padding+邊框赁咙。
- 標(biāo)準(zhǔn)盒模型：寬度=內(nèi)容寬度。
*要使ie6 7 8 使用標(biāo)準(zhǔn)盒模型：
(1)可以在開(kāi)頭添加<!doctype html>來(lái)使用標(biāo)準(zhǔn)盒模型免钻。
(2)box-sizing:border-box 使元素按照ie盒模型計(jì)算彼水，寬度=border+padding+內(nèi)容寬度。
7.在 ie 6, 7, 8中展示 盒模型极舔、inline-block凤覆、max-width的區(qū)別
- IE6 inline-block、max-width完全失效
- IE7 inline-block完全失效 max-width 僅起一定作用
- IE8 兩者都能正常使用
老師拆魏，還沒(méi)有裝虛擬機(jī)~
