一、問答部分
1. 如何調試 IE 瀏覽器
-
IE7及以上版本有調試臺，可以按F12啟動。
Paste_Image.png - 沒有調試臺的
通過設置 邊框顏色和背景色進行代碼調試。 - 通過安裝模擬器模擬不同版本的ie，微軟官方有諸如virtual pc、Expression Web SuperPreview等。通常用的比較多的ietester。
能夠集成不同版本的瀏覽器，但是權威性不足。 - 虛擬機，安裝帶有不同版本IE的系統
對宿機要求比較高，安裝成本較高一點。
2. 什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
1)、什么是CSS hack
CSS樣式表的在各大瀏覽器中的表現不是完全一樣的，因為各個瀏覽器及瀏覽器各個版本（如IE6-IE11，chrome，opera，firefox，safari），對于CSS的解析支持不一樣，這就導致了在不同瀏覽器或者不同版本中，CSS的顯示效果不一樣，這時我們為了獲得一致的CSS效果，就利用一些BUG或者特定樣式去達到一樣的效果，這個coding過程，我們稱之為CSS hack。
2)、在 CSS 和 HTML里如何寫 hack？
CSS Hack大致有3種表現形式：
- CSS屬性前綴法
由于IE發展較早，早期版本對于CSS的解析有部分沒加嚴格限制，成為了歷史遺留問題，利用這些BUG可以對某些CSS屬性寫CSS hack以達到效果。
.container{
_color: red;/*IE6識別*/
*color: red;/*IE6,IE7識別*/
color: red\9;/*IE6-IE10識別*/
color: red\0;/*IE8-IE10識別*/
color: red\9\0;/*IE9,IE10識別*/
}
- 選擇器前綴法
（即選擇器hack）選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。
*html{}/*只對IE6生效*/
*+html{}/*只對IE7生效*/
- IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
（即HTML條件注釋hack）：（注：IE10+已經不再支持條件注釋）這類hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。 - 只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]>
- 只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
- 只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上（包括）版本IE瀏覽器顯示
<![endif]-->
- 只在IE6以下版本生效
<!--[if lte IE 6]>
這段文字只在IE6以下（包括）版本IE瀏覽器顯示
<![endif]-->
- 只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
- 非IE瀏覽器生效
<!--[if ! IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->
3)、在 CSS 中 ie6、ie7的 hack 方式
- IE6
- 屬性前綴法
.box{
_color: red;/*for IE6*/
}
- 選擇器前綴法
*body{}/*for IE6*/
- 條件注釋法
<!--[if IE 6]>
<body class="ie6">
<![endif]-->
-
IE7
- 選擇器前綴法
*+body{}/*for IE7*/
- 條件注釋法
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
-
IE6~IE7
- 屬性前綴法
.box{
*color: red;/*for IE6~7*/
}
- 選擇器前綴法
@media screen\9{...}
- 條件注釋法
<!--[if lte IE 7]>
<body class="ie6 ie7">
<![endif]-->
4)、ps：
CSS hack現在用的越來越少，能不用盡量不用，可以用最少的hack去實現多瀏覽器兼容的頁面。所以不需要花很大精力去記，有這個概念，遇到了知道怎么查怎么解決就行。例如星號是做ie67的hack，下劃線是ie6的hack。
3. 列舉幾種 瀏覽器兼容問題
-
inline-block
inline-block對于IE6、IE7并不支持，解決方法是優雅降級，將display屬性值在IE6、7下寫為display: inline;
inline元素的display屬性設置為inline-block時，所有的瀏覽器都支持；
block元素的display屬性設置為inline-block時，IE6/IE7瀏覽器是不支持的。
解決方式一
*display: inline; /* 將塊級元素設置為內聯對象呈遞。*/
*zoom: 1; /* 觸發haslayout */
解決方式二
先使用display: inline-block;
屬性觸發塊級元素，然后再定義display:inline;，讓塊元素呈遞為內聯對象。需要注意的是，兩個display 要先后放在兩個CSS聲明中才有效果，順序也不能反。
div{
display: inline-block;
*display: inline;
}
-
透明度bug
IE8及以下版本不支持opacity屬性，可使用filter:alpha(opacity=50)替代
div{
filter: alpha(opacity=50);/*for IE*/
-moz-opacity: 0.5;/*for old versions of the Mozilla browsers*/
-khtml-opacity: 0.5; /* for old versions of Safari*/
opacity: 0.5;
}
-
雙外邊距浮動bug
這也是很常見的bug，網上給出數據出現頻率90%，是IE6和更低版本額雙外邊距浮動bug。在設置好浮動后，元素的外邊距加倍
- 不同瀏覽器的默認標簽的margin和padding不同
解決辦法
*{
margin: 0;
padding: 0;
}
- 標簽設置min-height不兼容解決辦法
如果我們要設置一個標簽的最小高度200px，需要進行的設置為：
{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}
4. 針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優雅降級是什么意思？
針對兼容、多瀏覽器覆蓋有什么看法？CSS作為一種語言，設計成有很強的向前兼容性，無論是瀏覽器覆蓋還是兼容都是解決bug的很好的方式，但是不應該過分信賴于hack和過濾器，因為并非掌握hack越多，自己的水平就越高。各個瀏覽器，各個版本，以及各個網頁html千差萬別，動一發則牽全身，所以要明智且受控制地應用hack和過濾器。之所以這么說，是因為如果CSS文件短小且簡單，并且只需要應用很少個hack的話，那么放在主CSS文件中加以注釋說明可能是安全的；但是之前說過，hack往往過于復雜，使代碼很難閱讀，所以最好將他們放在他們自己的樣式表中，不但容易閱讀，而且便于維護。但是這樣就增加了工作量，所以建議還是少用hack和過濾器，能不兼容的地方就不兼容，考慮業務需求的情況下合理使用兼容。而至于多瀏覽器覆蓋，我認為這個是可以合理考慮的，而且經常用也未嘗不可，畢竟各大瀏覽器用戶所占份額均不小 ，這點不容忽視。
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后在針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就針對高版本瀏覽器進行頁面構建，然后再針對低版本瀏覽器進行兼容。區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
使用策略：也許有各種fallback方案可以保證完全兼容性各個瀏覽器，但依然不能保證低端瀏覽器的使用體驗，最多是看起來各個瀏覽器都一樣了。因此，現在的設計和開發的策略是瀏覽器分級支持。優先為高端瀏覽器設計，同時考慮低端瀏覽器的退化方案。甚至有些復雜的應用可以拒絕ie6，提示用戶使用高端瀏覽器。
5. reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css：是通過重新定義標簽樣式，把瀏覽器的默認樣式覆蓋掉，以便保持個瀏覽器渲染的一致性。
- normalize.css：是reset.css的替代方案，保護有用的瀏覽器默認樣式，修改瀏覽器自身bug，優化可用性。
-
為什么推薦使用 nomalize.css
1）、Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺乏的。
2）、Reset 相對「暴力」，不管你有沒有用，統統重置成一樣的效果，且影響的范圍很大，講求跨瀏覽器的一致性。
2）、其它
- 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中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試。
6. IE盒模型和標準盒模型有什么區別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box
有什么作用
IE盒模型和標準盒模型的區別
IE盒模型：寬度（width）=邊框（border）+內邊距（padding）+內容寬度（content）
標準盒模型：寬度（width）=內容寬度（content）怎樣使IE678使用標準盒模型
IE不添加doctype時（怪異模式）使用的是IE盒模型，要想使IE678使用標準盒模型，給IE678添加doctype即可。box-sizing: border-box;是CSS3新增屬性，設置此屬性之后，相當于以怪異模式解析。
| 值 | 描述 |
|---|---|
| content-box | 這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。 |
| border-box | 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit | 規定應從父元素繼承 box-sizing 屬性的值。 |
box-sizing: border-box;計算方法為width/height=content+padding+border，表示指定的寬度和高度包含邊框、內邊距和內容區域。 即IE盒模型算法。
二、操作部分
1、virtualbox 安裝 xp 虛擬機
2、在IE6、IE7、IE8中展示 盒模型、inline-block、max-width的區別
- 在IE6、IE7、IE8中測試的盒模型代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: darkgreen;
border: solid 1px #000000;
padding: 20px;
margin: 30px;
color: #fffdef;
}
</style>
</head>
<body>
<div>
box1
</div>
<div>
box2
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
- 在IE6、IE7、IE8中測試的
inline-block代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
}
.box1{
background: green;
width: 100px;
height: 100px;
}
.box2{
background: blue;
width: 100px;
height: 100px;
}
.box3{
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
- 在IE6、IE7、IE8中測試的
max-width代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
}
.box1{
max-width: 100px;
height: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1">
box1box 1box1box1b ox1box1box1box1 box1box1
box1 box1box1 box1box1 box1box1 box1
box1 box1box1 box1box1 box1
box1 box1box1 box1
box1box 1box1box1b ox1box1box1box1 box1box1
box1 box1box1 box1box1 box1box1 box1
box1 box1box1 box1box1 box1
box1 box1box1 box1
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
** 本教程版權歸作者和饑人谷所有，轉載須說明來源！ **
