一、如何調(diào)試 IE 瀏覽器
- IE7版本以上可以按F12調(diào)出開(kāi)發(fā)者工具進(jìn)行調(diào)試屠尊。
- IE6版本可以使用
border: 1px solid red;直接進(jìn)行調(diào)試。 -
outline: 1px solid red;（ie6不支持）（outline）是繪制于元素周?chē)囊粭l線耕拷，位于邊框邊緣的外圍知染，可起到突出元素的作用。 - 安裝虛擬機(jī)斑胜，運(yùn)行不同版本的IE來(lái)調(diào)試。
- 利用工具在各個(gè)版本之間測(cè)試嫌吠，比如
IETester,它是一個(gè)WebBrowser控件止潘，包含有5.5到11等幾個(gè)版本的IE瀏覽器，界面美觀辫诅。
二凭戴、什么是CSS hack？在 CSS 和 HTML里如何寫(xiě) hack炕矮？在 CSS 中 ie6么夫、ie7的 hack 方式？
- 因?yàn)槟壳八袨g覽器并沒(méi)有統(tǒng)一對(duì)CSS的支持肤视，因此會(huì)導(dǎo)致不同的瀏覽器生成的頁(yè)面效果不一樣档痪。這個(gè)時(shí)候?yàn)榱宋覀儗?xiě)的css能夠兼容不同的瀏覽器，就有了css hack邢滑。
- css hack大致有三種表現(xiàn)形式：css屬性前綴法腐螟、選擇器前綴法、ie條件注釋法困后。
- 屬性前綴法：例如 IE6能識(shí)別“下劃線”和“星號(hào)”乐纸，IE7能識(shí)別“星號(hào)”，但不能識(shí)別“下劃線”摇予，IE6~IE10都認(rèn)識(shí)“\9”汽绢，但firefox前述三個(gè)都不能認(rèn)識(shí)。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
- **選擇器前綴法：
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
-
ie條件注釋：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)：<![endif]-->
在ie6下生效：
<!--[if IE 6]><p>這段文字只在IE6瀏覽器顯示</p><![endif]-->```
在IE6以上版本生效:
```
非ie瀏覽器生效
<!--[if !IE]><!-->這段文字只在非IE瀏覽器顯示<!--<![endif]-->```
在ie8下生效：
<!--[if IE 8]> 這段文字只在IE6瀏覽器顯示<![endif]-->```
三侧戴、列舉幾種瀏覽器兼容問(wèn)題
- inline-block屬性
在can i use上顯示不支持ie6宁昭、ie7跌宛。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task13</title>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div>你好</div>
<div>饑人谷</div>
</body>
</html>
inline-block屬性在虛擬機(jī)ie6下的效果：
解決方法：添加
*display:inline，在虛擬機(jī)ie6下的效果：
div {
display: inline-block;
*display: inline; /* 應(yīng)用hack */
}
- 透明度opacity
在can i use 上顯示i8以及以下版本都不支持
在ie6下顯示:
解決方法：添加
filter:alpha(opacity=50);與zoom:1
- min-height/width
can i use上顯示不支持ie6.
解決辦法：
.selector {
height:auto !important; /*自適應(yīng)*/
height:100px; /*固定寬度久窟，兼容ie6*/
min-height:100px;
}
四秩冈、針對(duì)兼容、多瀏覽器覆蓋有什么看法斥扛？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思入问？
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例稀颁、效果有限還是基本功能有先）
- 成本的角度（有無(wú)必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
根據(jù)兼容需求選擇技術(shù)框架芬失、庫(kù)（jquery）
根據(jù)兼容需求選擇兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
條件注釋、CSS Hack匾灶、js能力檢測(cè)做一些修補(bǔ)
- 漸進(jìn)增強(qiáng)(progressive enhancement):針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面棱烂，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果阶女、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
- 優(yōu)雅降級(jí)(graceful degradation):一開(kāi)始就構(gòu)建完整的功能颊糜，然后再針對(duì)低版本瀏覽器進(jìn)行兼容
五、reset.css和normalize.css分別是做什么的秃踩？為什么推薦使用 nomalize.css?
1.Normalize.css是保留瀏覽器的原來(lái)樣式并且做到每個(gè)瀏覽顯示一致衬鱼。
2.CSS Reset相反把瀏覽器的默認(rèn)樣式都重置了
為什么推薦Normalize.css？
Normalize.css
是一種CSS reset的替代方案憔杨。經(jīng)過(guò)@necolas和@jon_neal花了幾百個(gè)小時(shí)來(lái)努力研究不同瀏覽器的默認(rèn)樣式的差異鸟赫，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣。
我們創(chuàng)造normalize.css有下面這幾個(gè)目的：
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細(xì)的文檔來(lái)
Normalize.css
支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器消别，同時(shí)對(duì)HTML5元素抛蚤、排版、列表寻狂、嵌入的內(nèi)容岁经、表單和表格都進(jìn)行了一般化。盡管這個(gè)項(xiàng)目基于一般化的原則蛇券，但我們還是在合適的地方使用了更實(shí)用的默認(rèn)值蒿偎。
工具名詞解釋
條件注釋： 在HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼
IE Hack： 針對(duì)IE瀏覽器編寫(xiě)不同的CSS的讓IE能夠正常渲染的過(guò)程
js能力檢測(cè)： 瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器怀读，而是檢測(cè)瀏覽器的能力诉位。這樣，只需要檢測(cè)瀏覽器是否支持特定的能力菜枷，就可以給出特定的解決方案苍糠。這一部分檢測(cè)是解決瀏覽器兼容問(wèn)題的主要檢測(cè)
html5shive.js： 用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題
respond.js： 是一個(gè)小腳本啤誊，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性岳瞭，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
css reset 去除瀏覽器默認(rèn)的CSS樣式
normalize.css： 可以定制的CSS文件拥娄，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一
modernizr: 使你可以方便地為各種情況編寫(xiě) JavaScript 和 CSS，無(wú)論瀏覽器是否支持這些特性瞳筏。這是處理漸進(jìn)增強(qiáng)的完美方案稚瘾。Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象姚炕，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名
postCSS: 是一個(gè)使用JS 插件來(lái)轉(zhuǎn)換CSS 的工具摊欠。 這些插件可以支持使用變量，混入(mixin)柱宦，轉(zhuǎn)換未來(lái)的CSS 語(yǔ)法些椒，內(nèi)聯(lián)圖片等操作。 簡(jiǎn)而言之掸刊，PostCSS 可以將CSS 轉(zhuǎn)變成JavaScript 可以操作的數(shù)據(jù)格式
六免糕、IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
- IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別：
IE盒模型:盒子大小是設(shè)定的大小加上內(nèi)外邊距和邊框
標(biāo)準(zhǔn)盒模型: 盒子的大小就是width和height值
- 不添加doctype，也就是IE678怪異模式忧侧，使用的是IE盒模型石窑；添加doctype，chrome蚓炬， ie9+, ie678松逊，使用的是標(biāo)準(zhǔn)盒模型。
- box-sizing:border-box
是css3屬性试吁，就是變成ie盒模型的計(jì)算方式，width=border+padding+content楼咳，這樣就便于計(jì)算熄捍。
操作####
- virtualbox 安裝 xp 虛擬機(jī)
由于virtualbox安裝了總是有問(wèn)題，無(wú)法使用母怜，所有我用了另一個(gè)軟件余耽。
- 在 ie 6, 7, 8中展示 盒模型、inline-block苹熏、max-width的區(qū)別
- 盒模型
ie6
ie7
ie8
- inline-block
ie6
ie7
ie8
- max-width
ie6
ie7
ie8
（完）
