1.如何調試 IE 瀏覽器
<li> IE7以上（包括Edge)自帶開發者工具。
Edge：
<li>安裝虛擬機，安裝各種不同版本的IE來調試。
<li>使用IEtest來模擬運行不同的IE版本。
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
hack指的是利用瀏覽器的一個bug來解決另一個bug，CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什么樣的瀏覽器識別什么樣的符號是有標準的，CSS hack就是讓你記住這個標準），例如加上 " * " 和" _ " 只有ie6可以識別，其他瀏覽器默認不會識別這段代碼，就做到了只對ie6單獨設置的效果。
通過瀏覽器識別字符標準對應表可以得知：
<li>大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。
<li>\9 ：所有IE瀏覽器都支持
<li>_和- ：僅IE6支持
<li>* ：IE6、E7支持
<li>\0 ：IE8、IE9支持，opera部分支持
<li>\9\0 ：IE8部分支持、IE9支持
<li>\0\9 ：IE8、IE9支持
根據此對應表，可以得知：
1.區別IE和非IE瀏覽器
<li>#tip{ background:blue;非IE背景藍色 因為所有瀏覽器都能解釋
<li>background:red\9;IE6、IE7、IE8、IE9背景紅色
2.區別IE6,IE7,IE8,FF
<li>#tip{ background:blue;Firefox}背景變藍色 所有瀏覽器都支持
<li>background:red\9;IE8背景變紅色 IE6、7、8、9支持覆蓋上面樣式
<li> *background:black;/E7背景變黑色 IE6、7支持又一次覆蓋上面樣式
<li> _background:orange;IE6背景變橘色，僅IE6支持又一次覆蓋上面樣式
【說明】："*"因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、GoogleChrome、Safari等)。
3.區別IE6、IE7、Firefox
<li>#tip{ background:blue;Firefox背景變藍色
<li>*background:black;IE7背景變黑色
<li> _background:orange;IE6背景變橘色
【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至于Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox
hack只是解決兼容問題的一種手段，在實際項目過程中，應盡量減少hack的使用，根據不同的項目要求，在編碼過程中最好就可以提前考慮到兼容問題。
3.列舉幾種 瀏覽器兼容問題
1.IE6、IE7不識別inline-block但可以觸發塊元素。其它主流瀏覽器均支持inline-block。
<li>解決IE6、IE7兼容性的方法：
1.首先設置inline-block觸發塊元素，具有了layout的特性，然后設置display:inline使塊元素呈現內聯元素，此時layout的特性不會消失。
2.直接設置display:inline，使用zoom:1觸發layout。
兼容所有瀏覽器的方法是：
*display:inline;
*zoom:1;
}```
2.min-height在IE7以下不支持，一般采用把高度寫死來解決這個問題。
3.opacity是用來設定元素透明度的， 是CSS 3里的一個屬性，IE8以下不支持，包括一些老版本的瀏覽器也不支持。
.opacity{
filter:alpha(opacity=50); /* IE /
-moz-opacity:0.5; / 老版Mozilla /
-khtml-opacity:0.5; / 老版Safari /
opacity: 0.5; / 支持opacity的瀏覽器*/
}```
4.針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優雅降級是什么意思？
具體做不做兼容， 兼容到什么程度，不能一概而論，應該根據不同項目來具體調整，主要是項目面向的用戶使用各瀏覽器所占的百分比，一般來說，某個瀏覽器的用戶使用量超過 5% 的時候，就應該對該瀏覽器進行兼容處理了，反之，為了個別用戶量極小的瀏覽器而特地花費了大量的時間與精力來做兼容，是不可取的；甚至某些通過hack解決的兼容問題會帶來其他一些難以預料到的問題，得不償失。一般來說，兼容程度大致分為三個級別：
A： 好看又好用。
B：好用但不好看，好用但有些外觀無法識別。
C：不好看，但功能可以勉強使用。
我們應對于不同的項目要求和不同的瀏覽器版本靈活選擇這三種兼容程度。
漸進增強指的是先在較低版本的、兼容性較差的瀏覽器上進行編碼，以保證正常使用，然后再對其他高版本、兼容性強的瀏覽器做出一些功能較為強大的編碼。
優雅降級與漸進增強相反，先在高版本、兼容性強的瀏覽器實現功能，然后根據要求對低版本瀏覽器進行兼容處理。
【區別】：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
5.reset.css和normalize.css分別是做什么的？為什么推薦使用nomalize.css?
<li>reset.css是通過重新定義標簽樣式，把瀏覽器的默認樣式覆蓋掉，以便保持個瀏覽器渲染的一致性，相對暴力；但是reset仍有自己的優點和應用場景：
1.商業產品，建議使用CSS reset。原因就是瀏覽器版本迭代越來越快，對設計的還原要求較高的產品，如果瀏覽器版本升級而影響WEB界面發生細微變化，這是無法接受的。
2.多人協作項目，建議使用CSS reset，為了省事，高效，規范團隊。
3.個人項目，比如博客、文檔，完全不需要CSS reset。
<li>Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復。Normalize 實際上就是一段CSS代碼，通過在HTML開頭的引用來達到類似與reset的目的。
創造normalize.css有下面這幾個目的：
1.保護有用的瀏覽器默認樣式而不是完全去掉它們
2.一般化的樣式：為大部分HTML元素提供
3.修復瀏覽器自身的bug并保證各瀏覽器的一致性
4.優化CSS可用性：用一些小技巧
5.解釋代碼：用注釋和詳細的文檔
Normailze.css的優點：
Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關于這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。Normalize.css 不會讓你的調試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。Normalize.css 是模塊化的
這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試。
這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。
如何使用 normalize.css
首先，安裝或從Github下載Normalize.css，接下來有兩種主要途徑去使用它。
策略一：將normalize.css
作為你自己項目的基礎CSS，自定義樣式值以滿足設計師的需求。
策略二：引入normalize.css
源碼并在此基礎上構建，在必要的時候用你自己寫的CSS覆蓋默認值。
<li>引用：來，讓我們談一談 Normalize.css
6.IE盒模型和標準盒模型有什么區別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用
盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。對于盒模型的詳細解答在前面的文章盒模型基礎中。
box-sizing:border-box其實就是在聲明doctype的情況下對盒模型使用怪異模式。
使用場景：
一般來說，百分比為寬度的容器設置padding時,容器的寬度就會像外擴展相應的padding值,要使寬度不被撐開,那么就是用box-sizing:border-box;會控制這種情況。在這種情況下，使用box-sizing:border-box;比較好。
推薦寫法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}```
【說明】：選擇器 * 無法覆蓋到偽元素，所以需要給 :before 和 :after 分別設置。而通過繼承的方式應用到所有元素，需要時可以方便的設置某個元素及其后代元素的 box-sizing 回 content-box。
***
##7.在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的區別
**由于win10無法使用ietester，所以在XP虛擬機中運行ieteser：**
<li>盒模型代碼：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>box</title>
<style>
.box {
border: 20px solid #000;
padding: 20px;
margin: 20px;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>```
1.不加<!doctype html>，在怪異模式下運行代碼：
2.加<！doctype html>，在標準模式下運行：
<li>inline-block 代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block</title>
<style>
.content {
display: inline-block;
}
</style>
</head>
<body>
<div class="content">你好</div>
<div class="content">世界</div>
</body>
</html>```
IE 6、7 中運行：
IE 8中運行：
<li>max-width 代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
max-width: 300px;
}
</style>
</head>
<body>
<p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p>
</body>
</html>```
IE 6中運行：
IE 7、8中運行：
本文版權歸本人和饑人谷所有，轉載請注明來源。
