一、如何調(diào)試 IE 瀏覽器
- IE7版本以上可以按F12調(diào)出開發(fā)者工具進(jìn)行調(diào)試。
- IE6版本可以使用
border: 1px solid red;直接進(jìn)行調(diào)試。 -
outline: 1px solid red;（ie6不支持）（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。 - 安裝虛擬機(jī)，運(yùn)行不同版本的IE來調(diào)試。
- 利用工具在各個(gè)版本之間測試，比如
IETester,它是一個(gè)WebBrowser控件，包含有5.5到11等幾個(gè)版本的IE瀏覽器，界面美觀。
二、什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 因?yàn)槟壳八袨g覽器并沒有統(tǒng)一對CSS的支持，因此會導(dǎo)致不同的瀏覽器生成的頁面效果不一樣。這個(gè)時(shí)候?yàn)榱宋覀儗懙腸ss能夠兼容不同的瀏覽器，就有了css hack。
- css hack大致有三種表現(xiàn)形式：css屬性前綴法、選擇器前綴法、ie條件注釋法。
- 屬性前綴法：例如 IE6能識別“下劃線”和“星號”，IE7能識別“星號”，但不能識別“下劃線”，IE6~IE10都認(rèn)識“\9”，但firefox前述三個(gè)都不能認(rèn)識。
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條件注釋：針對所有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]-->```
三、列舉幾種瀏覽器兼容問題
- 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;
}
四、針對兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級是什么意思？
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果有限還是基本功能有先）
- 成本的角度（有無必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
根據(jù)兼容需求選擇技術(shù)框架、庫（jquery）
根據(jù)兼容需求選擇兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
條件注釋、CSS Hack、js能力檢測做一些修補(bǔ)
- 漸進(jìn)增強(qiáng)(progressive enhancement):針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
- 優(yōu)雅降級(graceful degradation):一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容
五、reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
1.Normalize.css是保留瀏覽器的原來樣式并且做到每個(gè)瀏覽顯示一致。
2.CSS Reset相反把瀏覽器的默認(rèn)樣式都重置了
為什么推薦Normalize.css？
Normalize.css
是一種CSS reset的替代方案。經(jīng)過@necolas和@jon_neal花了幾百個(gè)小時(shí)來努力研究不同瀏覽器的默認(rèn)樣式的差異，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣。
我們創(chuàng)造normalize.css有下面這幾個(gè)目的：
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細(xì)的文檔來
Normalize.css
支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進(jìn)行了一般化。盡管這個(gè)項(xiàng)目基于一般化的原則，但我們還是在合適的地方使用了更實(shí)用的默認(rèn)值。
工具名詞解釋
條件注釋： 在HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼
IE Hack： 針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
js能力檢測： 瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測
html5shive.js： 用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別，并導(dǎo)致CSS不起作用的問題
respond.js： 是一個(gè)小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)
css reset 去除瀏覽器默認(rèn)的CSS樣式
normalize.css： 可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一
modernizr: 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案。Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名
postCSS: 是一個(gè)使用JS 插件來轉(zhuǎn)換CSS 的工具。 這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的CSS 語法，內(nèi)聯(liá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安裝了總是有問題，無法使用，所有我用了另一個(gè)軟件。
- 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的區(qū)別
- 盒模型
ie6
ie7
ie8
- inline-block
ie6
ie7
ie8
- max-width
ie6
ie7
ie8
（完）
