1.如何調試 IE 瀏覽器？
- IE瀏覽器7+自帶的開發者工具，IE6可以采用border的方法或是下載virtural IE6進行輔助開發
- 采用模擬器的方式去模擬不同版本下的IE瀏覽器，如IEtester或chrome的付費插件Test IE
- 通過安裝虛擬機的方式，安裝不同版本的IE的運行環境去達到調試IE瀏覽器的目的
2. 什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 為了解決不同瀏覽器或是瀏覽器不同版本的網頁解析方式不一的問題，開發者撰寫相應的css code而達到兼容目的，這整個過程叫做css hack
- css hack大致有三種方法：css屬性前綴法、IE條件注釋法和選擇器前綴法
css 屬性前綴法：
.box{
color:red; /* for all browsers */
_color:black; /* for ie6 */
*color:green; /* for ie6~7 */
color:pink\9; /* for ie6~10 */
}
選擇器前綴法：
*body{
/* only for ie6 */
}
*+p{
/* for ie7 */
}
@media screen\9{
}
div{
/* for ie6~7 */
}
ie cc:
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
<!--[if IE 6]>
這段文字只在IE6顯示
<![endif]-->
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本顯示
<![endif]-->
<!--[if lt IE 6]>
這段文字只在IE6以下（不包括)版本顯示
<![endif]-->
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->
- ie6/7的css hack
- ie6
屬性前綴法：
.box{
_color:black; /* for ie6 */
}
選擇器前綴法：
*body{
margin:0;
}
條件注釋法：
<head>
<!--[if IE 6]>
<body class="ie6">
<![endif]-->
</head>
- ie7
選擇器前綴法：
*+body{
margin:0;
}
條件注釋法：
<head>
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
</head>
- ie6~7
屬性前綴法：
.box{
*color:black; /* for ie6~7 */
}
選擇器前綴法：
@media body\9{
margin:0;
}
條件注釋法：
<head>
<!--[if IE lte 7]>
<body class="ie6 ie7">
<![endif]-->
</head>
3. 列舉幾種瀏覽器兼容問題
- 不同瀏覽器的標簽默認的margin和padding不一，解決方案是
*{margin:0;padding:0;} - 塊級元素使用float以及存在左右margin時，IE6顯示的margin比設定的大，解決方案是在添加float樣式的標簽內加入
display:inline; - 圖片默認間距：有些瀏覽器在多個img標簽放一起時出現默認間距，解決方案是使用float屬性或者并排
原理：所有具有display:inline-block特性的元素，都有一個特點，那就是代碼換行會被解析成空白，沒有為什么，這就是瀏覽器的渲染機制，基于這一點，代碼如果清除換行可以解決，但是不希望所有的代碼都擠在一起，那么你就可以設置浮動來解決，目的無非就是讓塊屬性元素在同排內顯示 - 透明度的問題：
selector{
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;
}
- min-width或max-width：ie6不支持最大或最小寬高
/* 最小寬度 */
.min_width{
min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/* 最大寬度 */
.max_width{
max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
4. 針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優雅降級是什么意思？
- 兼容多瀏覽器的看法：
- 分析需求，是否有兼容的必要性。針對特定瀏覽器的用戶
包括頁面的用戶、參與設計的人員、用戶的瀏覽器類型使用狀況等 - 兼容程度，對于高級瀏覽器頁面的內容展示要求要高，對于低級瀏覽器可以在不影響正常頁面展示前提下有所降低
- 總的原則是，基于成本與效益間的權衡考慮
- 分析需求，是否有兼容的必要性。針對特定瀏覽器的用戶
- 漸進增強和優雅降級的觀點比較
漸進增強和優雅降級都是出于為不同瀏覽器提供兼容方案的目的，只是在實際開發時的思路不同。- 漸進增強是基于低級瀏覽器進行開發，在滿足其內容、樣式和交互的需求后，針對更加高級的瀏覽器實現設計、交互等的強化。
- 優雅降級是基于高級瀏覽器進行開發，在完成高級瀏覽器的各項要求后，針對低級瀏覽器無法支持高版本功能的問題，實現功能、設計等模塊的逐步退化，并在退化過程中能求保證網頁的基本功能和信息的實現。
5. reset.css和normalize.css分別是做什么的？為什么推薦使nomalize.css?
首先，由于不同的瀏覽器或是瀏覽器的不同版本在支持和渲染頁面時出現的差異，導致開發者需要進行瀏覽器的兼容。針對這一問題，網絡的大牛們想方設法出不同的解決方案，reset.css和normalize.css這兩種不同思路的解決兼容性問題的方案應運而生。
- reset.css是早期的解決不同瀏覽器默認樣式不一的問題的方案，主要思路是在css文檔的初始部分重置不同元素的樣式，使得不同的瀏覽器在初始樣式上統一標準。但是這一方法的缺陷是過于暴力，把所有元素同一對待，一旦要使用如ul標簽的前綴時，又得重新設置，浪費資源。
此時，一種新的解決這一問題的思路誕生——normalize.css。 - normalize.css在保留有用的瀏覽器默認樣式的基礎上，為不同瀏覽器提供通用樣式的規范，即給定通用的樣式，針對不同瀏覽器出現的兼容性問題分門別類的提供優化方案。
- 由此，我們可知reset.css就像倚天屠龍記中的七傷拳——欲傷人，先傷己，reset.css就是欲統一樣式，先要把自己默認樣式破壞個遍。
而normalize.css就如同武當的太極拳——能夠在統一樣式標準的前提下，保留瀏覽器的默認樣式。
綜上所述，目前normalize.css是解決瀏覽器兼容的最新也是目前來看最好的方案！
6. IE盒模型和標準盒模型有什么區別? 怎樣使 IE7、8使用標準盒模型?box-sizing:border-box有什么作用?
- IE盒模型：width=border+padding+content。
W3C盒模型:width=content. - IE678使用標準盒模型：
在html最前面添加<!DOCTYPE html>聲明。 - box-sizing:border-box作用：
使盒模型設定成IE盒模型的方式來計算寬度。
