- 如何調試 IE 瀏覽器
1 安裝高版本IE瀏覽器，如安裝的是IE9，則可以直接調試IE9、IE8、IE7
2 IE6需要安裝windowsXP虛擬機。
3 IE7以上版本可用自瀏覽器自帶的開發者工具進行調試，IE6可設置border或outline屬性調試塊元素及盒模型。 - 什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!
- CSS和HTML寫hack的方法：
1 屬性前綴法(即類內部Hack)：例如 IE6能識別-,_,*，IE7能識別星號*，但不能識別_,_，IE6~IE10都認識\9，但firefox前述三個都不能認識
p {
-width: 100px;
_width: 100px;
}/*兼容IE6*/
p {
*width: 100px;
}/*兼容IE6 7，可使用的符號有 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
說明：在標準模式中
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
2 選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}
應用星號HTML hack
#content {
width: 80px;
padding: 10px;
}
* html #content {
width: 100px;
w\idth: 80px;
} /*兼容IE6或更低版本的瀏覽器*/
應用子選擇器hack
html > body {
background-image: url(bg.png);
}/*使用子選擇器hack對windows上的IE5和IE6隱藏background-image屬性，這個選擇器對IE7以下是無效的。*/
3 IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效
只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->
| 符號 | 說明 |
|---|---|
| lte： | 就是Less than or equal to的簡寫，也就是小于或等于的意思。 |
| lt ： | 就是Less than的簡寫，也就是小于的意思。 |
| gte： | 就是Greater than or equal to的簡寫，也就是大于或等于的意思。 |
| gt ： | 就是Greater than的簡寫，也就是大于的意思。 |
| ! ： | 就是不等于的意思，跟javascript里的不等于判斷符相同 |
- 在IE6和IE7下的css hack
- HTML hack
<!--[IF IE 6]>
This a Internet Explore 6 browser.
<![ENDIF]-->
<!--[IF IE 7]>
his a Internet Explore 7 browser.
<![ENDIF]-->
IE6 CSS hack:
div.ct{
display:inline-block;
_display:inline;
}
*div.ct{
display:inline;
}
IE7 CSS hack:
div.ct{
display:inline-block;
*display:inline;
}
- 列舉幾種 瀏覽器兼容問題
1 不同瀏覽器之間默認的padding與margin有較大差異，常在CSS里用* {padding：0；margin:0;}解決。
2 雙外邊距浮動bug- 在IE6和更低版本的瀏覽器中，這個window bug使任何浮動元素上的外邊距加倍。
p {
float: left;
margin-left: 100px;
}
* 解決方法是給元素設置display: inline;屬性（行內元素設置display:block;并且設置浮動時用同樣方法解決）
3 設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度
* 解決方法：設置overflow:hidden
4 幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
* 解決方法：設置浮動，設置負margin屬性。
5 標簽最低高度設置min-height不兼容
p {
width: 200px;
min-height: 200px;
background: yellow;
}
* 解決方法:在css里寫入*height：200px；這樣就在IE6 7版本下寫死這個高度。
6 各個瀏覽器透明度的css兼容寫法
filter:alpha(opacity=50); /IE,透明度50%/
-moz-opacity:0.5; /Firefox,透明度50%/
opacity:0.5;/其他瀏覽器,透明度50%/
* 針對兼容、多瀏覽器覆蓋有什么看法？**漸進增強**和**優雅降級**是什么意思？
* 要針對項目本身進行調研，查看目標人群使用的瀏覽器情況。一般情況對于使用人群小于5%的就可以忽略了，兼容和覆蓋全部瀏覽器這本身就是不現實的，而且涉及到時間和成本的問題，還有一些暫時無法解決的兼容性bug等，這些都需要綜合考慮。
* 漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
* 優雅降級 ：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
* reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
* reset.css表示瀏覽器樣式重置。HTML標簽在瀏覽器中都有默認的樣式，例如p標簽有上下邊距，strong標簽有字體加粗樣式等。不同瀏覽器的默認樣式之間存在差別，例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現的，而在Firefox下卻是由padding實現的。開發時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容性問題，影響開發效率。現在很流行的解決方法是一開始就將瀏覽器的默認樣式全部覆蓋掉，這就是CSS reset。
* [Normalize.css](https://github.com/necolas/normalize.css)，它是一個定制的 reset.css 文件，可以讓所有元素在所有的現代瀏覽器上渲染一致。相比其它的 reset.css，Normalize.css 保留有用的默認樣式，不像其它 reset.css 那么徹底，移除了每個默認樣式，然后又得費神把需要的樣式再加回來。Normalize.css 定義絕大多數元素的默認樣式，并且還提高了一些元素的可用性，并且代碼都有詳細的注釋。
* Normalize.css支持的瀏覽器有
>Google Chrome (latest)
Mozilla Firefox (latest)
Mozilla Firefox 4
Opera (latest)
Apple Safari 6+
Internet Explorer 8+
* Normalize.css 使用非常簡單，無需下載，只要在網頁的頭部加入以下代碼即可：
<link rel="stylesheet" type="text/css" />
* IE盒模型和標準盒模型有什么區別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用
* IE盒模型：IE早期版本在混雜模式中(不聲明!DOCTYPE HTML)使用自己的非標準盒模型。在這些版本中width屬性不是內容的寬度，而是內容+內邊距+邊框的總和寬度。
* 標準盒模型：標準盒模型就是W3C盒模型，width只為內容的寬度。
* 在頁面頭部添加<!DOCTYPE html>可以使IE使用標準盒模型。
* 為頁面所有元素添加樣式 box-sizing: border-box; ，使元素的內邊距和邊框不再會增加它的寬度。
* 下圖可以看出div1設置了padding和border值但是寬高與div2一可以看出box-sizing: border-box;的效果。
* 在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的區別
* 盒模型的區別：
* inline-block屬性在IE6 IE7 下無效
* max-width屬性在IE6下無效
div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
max-width: 50px;
display: inline-block;
}
* 參考
[http://www.teaching-materials.org/csstools/](http://www.teaching-materials.org/csstools/)
[知乎：怎樣可以很好地保證網頁的瀏覽器兼容性](https://www.zhihu.com/question/19736007)
[讓我們談一談 Normalize.css](http://jerryzou.com/posts/aboutNormalizeCss/)
[知乎: Normalize.css 與傳統的 CSS Reset 有哪些區別](https://www.zhihu.com/question/20094066)
[常見瀏覽器兼容于解決方式](http://blog.csdn.net/chuyuqing/article/details/37561313/)
[定義瀏覽器默認樣式](http://blog.wpjam.com/m/normalize-css/)
`本博客版權歸 本人和饑人谷所有，轉載需說明來源`