1.如何調(diào)試 IE 瀏覽器
1.使用高版本的IE树绩，F(xiàn)12打開(kāi)開(kāi)發(fā)者工具進(jìn)行調(diào)試蒸健，還可以模擬其他版本的IE瀏覽器（有稍許不同）
F12打開(kāi)開(kāi)發(fā)者工具：
模擬其余版本瀏覽器：
2.對(duì)于IE6亿虽、7,沒(méi)有相應(yīng)的開(kāi)發(fā)者工具俄烁，可以在css中加
border:1px solid red;或者outline:1px solid red;觀(guān)察盒模型到底是什么樣子的涩咖；3.使用IE tester模擬網(wǎng)頁(yè)在IE5.5赶袄、IE6、IE7抠藕、IE8饿肺、IE9以及IE10等瀏覽器中的兼容性
4.安裝虛擬機(jī)，創(chuàng)建不同的IE執(zhí)行環(huán)境
2.什么是CSS hack盾似？在 CSS 和 HTML里如何寫(xiě) hack敬辣？在 CSS 中 ie6、ie7的 hack 方式零院？
1.什么是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樣式的目的
2.在 CSS 和 HTML里如何寫(xiě) hack?
- IE條件注釋
lte——Less than or equal to，小于或等于
lt —— Less than打洼，小于
gte——Greater than or equal to龄糊，大于或等于逆粹。
gt ——Greater than，大于
! ——不等于
屬性前綴法(即類(lèi)內(nèi)部Hack)：在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴炫惩，以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果僻弹。例如 IE6能識(shí)別下劃線(xiàn)""和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "他嚷，但不能識(shí)別下劃線(xiàn)"",IE6~IE10都認(rèn)識(shí)"\9"蹋绽，但firefox前述三個(gè)都不能認(rèn)識(shí)。
選擇器前綴法(即選擇器Hack)：針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器筋蓖，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack卸耘。例如 IE6能識(shí)別
*html .class{}，IE7能識(shí)別*+html .class{}
3.在 CSS 中 ie6粘咖、ie7的 hack 方式鹊奖？
- 選擇器hack
IE6以及IE6以下版本瀏覽器
* html .demo {
color: green;
}
僅IE7瀏覽器
*:first-child+html .demo {
color: green;
}
- 屬性Hack
IE6瀏覽器
.demo {
_color: red;
}
IE6/7瀏覽器
.demo {
*color: red;
}
更多詳細(xì)內(nèi)容可以參考這個(gè)網(wǎng)站：http://browserhacks.com/
3.列舉幾種瀏覽器兼容問(wèn)題
1.不同瀏覽器默認(rèn)的margin 和padding差異較大
解決方案：在CSS里添加*{margin:0;padding:0;}重置樣式
2.塊屬性標(biāo)簽float后，又有橫行的margin情況下涂炎，在IE6顯示margin比設(shè)置的大,常見(jiàn)癥狀是IE6中后面的一塊被頂?shù)较乱恍?br>
解決方案：在這個(gè)div里面加上display:inline;
例如：
#IamFloat{
float:left; margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}```
3.標(biāo)簽最低高度設(shè)置min-height不兼容
E與寬度和高度的問(wèn)題 IE 不認(rèn)得min-這個(gè)定義忠聚，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了唱捣，如果只用寬度和高度两蟀，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話(huà)震缭，IE下面根本等于沒(méi)有設(shè)置寬度和高度赂毯。
解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度,需要進(jìn)行的設(shè)置為：
box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
3.IE6圖片下有空隙產(chǎn)生
解決方法也:改變html的排版或者設(shè)置img 為`display:block `或者設(shè)置`vertical-align` 屬性為` vertical-align:top | bottom |middle |text-bottom` 都可以解決.
4.透明度的兼容CSS設(shè)置
解決方案：用CSS設(shè)定一個(gè)元素半透明的話(huà)，可能會(huì)這樣寫(xiě):
opacity{
filter:alpha(opacity=50); /* IE /
-moz-opacity:0.5; / 老版Mozilla /
-khtml-opacity:0.5; / 老版Safari /
opacity: 0.5; / 支持opacity的瀏覽器*/
}
5.display:inline-block的兼容問(wèn)題
解決方案
.selector{
display:inline-block;
display:inline;zoom:1;
}
####4.針對(duì)兼容拣宰、多瀏覽器覆蓋有什么看法党涕？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思？
對(duì)目標(biāo)人群進(jìn)行調(diào)查巡社，分析不同版本瀏覽器的人群占比膛堤，編寫(xiě)代碼時(shí)對(duì)絕大部分做到多瀏覽器覆蓋，對(duì)于使用人數(shù)較少（小于5%）晌该，存在個(gè)別問(wèn)題的肥荔，保證基本功能可以實(shí)現(xiàn)，不必過(guò)于追求完全兼容
* 漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行頁(yè)面構(gòu)建朝群，保證最基本的功能燕耿，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)以追求更好的用戶(hù)體驗(yàn)姜胖。
>“漸進(jìn)增強(qiáng)”觀(guān)點(diǎn)認(rèn)為應(yīng)該關(guān)注于內(nèi)容本身誉帅，優(yōu)雅降級(jí)從復(fù)雜開(kāi)始，并試圖減少用戶(hù)體驗(yàn)的供給，漸進(jìn)增強(qiáng)則從一個(gè)非逞料牵基礎(chǔ)档插，能夠起作用的版本開(kāi)始，不斷擴(kuò)充踏志，以適應(yīng)未來(lái)環(huán)境的需要阀捅。
* 優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建完整的功能胀瞪，然后再針對(duì)低版本瀏覽器進(jìn)行兼容针余。
>“優(yōu)雅降級(jí)”觀(guān)點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)最完善的內(nèi)容來(lái)設(shè)計(jì)網(wǎng)站，將那些“過(guò)時(shí)”或功能有缺失的瀏覽器的測(cè)試安排在開(kāi)發(fā)周期的最后階段凄诞，并把測(cè)試對(duì)象限定在主流瀏覽器的前一個(gè)版本圆雁。在優(yōu)雅降級(jí)的觀(guān)點(diǎn)下，低版本瀏覽器的用戶(hù)體驗(yàn)簡(jiǎn)陋帆谍，除了修復(fù)交大的錯(cuò)誤外伪朽，某些低版本瀏覽器的差異將直接被忽略。
####5.`reset.css`和`normalize.css`分別是做什么的汛蝙？為什么推薦使用`nomalize.css`?
* `reset.css`:早期的瀏覽器支持和理解的CSS規(guī)范不同烈涮，導(dǎo)致渲染頁(yè)面時(shí)效果不一致，會(huì)出現(xiàn)很多兼容性問(wèn)題,reset.css就是把默認(rèn)樣式統(tǒng)統(tǒng)重置成一樣的效果窖剑，講求跨瀏覽器的一致性坚洽。
* `normalize.css`：注重通用的方案，重置掉該重置的樣式西土，保留有用的 user agent 樣式讶舰，同時(shí)進(jìn)行一些 bug 的修復(fù)，這點(diǎn)是 reset 所缺乏的需了。
* 為什么推薦使用`nomalize.css`?
1.`normalize.css`保護(hù)了有價(jià)值的默認(rèn)值
`Reset`通過(guò)為幾乎所有的元素施加默認(rèn)樣式跳昼，強(qiáng)行使得元素有相同的視覺(jué)效果。相比之下肋乍，`Normalize.css`保持了許多默認(rèn)的瀏覽器樣式鹅颊。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)墓造，`Normalize.css`會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合挪略。
2.`normalize.css`修復(fù)了瀏覽器的bug
修復(fù)了常見(jiàn)桌面端和移動(dòng)端瀏覽器的bug。這往往超出了reset所能做到的范疇滔岳。`normalize.css`修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置杠娱、預(yù)格式化文字的`font-size`問(wèn)題、在IE9中SVG的溢出谱煤、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug摊求。
3.`normallize.css`不會(huì)讓你的調(diào)試工具變得雜亂
使用reset時(shí)瀏覽器工具中大段的繼承鏈接讓人困擾，這在`normalize.css`中不會(huì)出現(xiàn)刘离。
4.`normalize.css`是模塊化的
當(dāng)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分室叉，使得我們清楚知道哪些元素被設(shè)置了特定的值睹栖，因此這能讓你選擇性地移除掉某些永遠(yuǎn)不會(huì)用的部分（比如表單的一般化）。
5.`normallize.css`擁有詳細(xì)的文檔
`normalize.css`的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試茧痕。這意味著你可以找到每一行代碼具體完成了什么工作野来、為什么要寫(xiě)這句代碼、瀏覽器之間的差異踪旷，并且你可以更容易地進(jìn)行自己的測(cè)試曼氛。
####6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?`box-sizing:border-box`有什么作用
1.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別?
IE盒模型：寬度=邊框+padding+內(nèi)容寬度
標(biāo)準(zhǔn)盒模型：寬度=內(nèi)容寬度
2.怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?
IE6、7令野、8怪異模式（不添加 doctype）使用 IE盒模型舀患， IE9+, IE6、7气破、8(添加 doctype) 使用標(biāo)準(zhǔn)盒模型
3.`box-sizing:border-box`有什么作用聊浅？
`box-sizing`屬性可以為三個(gè)值之一：`content-box`，`border-box`现使，`padding-box`低匙。
`content-box`：border和padding不計(jì)算入width之內(nèi)
`padding-box`：padding計(jì)算入width內(nèi)
`border-box`：border和padding計(jì)算入width之內(nèi)，其實(shí)就是怪異模式了
border-box省去一次又一次的加加減減碳锈，它還有一個(gè)關(guān)鍵作用——讓有邊框的盒子正常使用百分比寬度顽冶。比如要一個(gè)元素的寬度嚴(yán)格是其父元素的某個(gè)百分比，但是又要給其子元素周邊留出點(diǎn)空白殴胧，這樣就很方便：`box-sizing: border-box; width: xx%; padding: yyem; `
###操作
####在 ie 6, 7, 8中展示 **盒模型**渗稍、**inline-block**、**max-width**的區(qū)別
測(cè)試代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示</title>
<style type="text/css">
.box {
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
border: 1px solid red;
background-color: green;
}
.line-block {
display: inline-block;
}
.max-wid {
max-width: 400px;
height:50px;
border: 1px solid red;
background-color: green;
}
</style>
</head>
<body>
<p>box-model</p>
<div class="box"></div>
<p>inline-block</p>
<div class="box line-block"></div>
<div class="box line-block"></div>
<div class="box line-block"></div>
<p>max-width</p>
<div class="box max-wid"></div>
</body>
</html>
**盒模型**
IE6：
IE7：
IE8：
**inline-block**
IE6：
IE:7
IE8：
**max-width**
IE6
IE7
IE8
