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