1 . 如何調(diào)試 IE 瀏覽器
- 使用高版本的IE瀏覽器控制臺。
- 如果某個元素不見了抛虫，可以使用如下方法：
a.給該元素加上一個邊框border:1px solid color懂缕；
b.給該元素的邊框加上一個樣式：outline：1px solid color； - 在網(wǎng)頁輸入框輸入javascript:alert(document.get…)進行調(diào)試键俱；
2 . 什么是CSS hack兰绣？在 CSS 和 HTML里如何寫 hack？在 CSS 中 IE 7编振、IE 8的 hack 方式
-
CSS hack：由于各個版本缀辩，內(nèi)核的瀏覽器對css的支持不一，從而導致在不同瀏覽器上同一源代碼渲染出來的效果不一踪央，我們又需要去兼容它們臀玄，所以就出現(xiàn)hack這種方式去做一些兼容，這個過程就稱之為CSS hack畅蹂。
(hack：一些低版本瀏覽器兼容性不好健无，但是瀏覽器本身存在著一些bug，開發(fā)者利用這些bug去寫代碼來解決瀏覽器兼容問題的方式叫做hack液斜。) -
hack：有三種寫法：css屬性前綴法累贤、選擇器前綴法和IE條件注釋法
css屬性前綴法：
.box{
color:red;/* for all browsers */
_color:red;/* for ie 6 */
*color:red;/* for ie 6-7 */
color:red\9; /* for ie 6-10 */
}
選擇器前綴法：
*body{
/* for ie 6 */
}
*+p{
/* for ie 7 */
@media screen\9{
/* for ie 6-7 */
IE條件注釋：
<!--[if IE]>
這段文字只在IE顯示
<![endif]-->
<!--[if IE 6]>
這段文字只在IE6顯示
<![endif]-->
<!--[if gte IE 6]>
這段文字只在IE6或以上版本顯示
<![endif]-->
<!--[if lte IE 6]>
這段文字只在IE6或一下版本顯示
<![endif]-->
<!--[if !IE]>
這段文字在非IE瀏覽器上顯示
<![endif]-->
-
IE 6、IE 7的 hack 方式：
ie6 hack
css屬性前綴法：
.box{
_color:red;
}
選擇器前綴法：
*box{
color:red;
}
IE條件前綴法：
<!--[if IE 6]>
<div class="box">
<![endif]-->
ie 7 hack
選擇器前綴法：
*+body{
color:red;
}
IE條件前綴法：
<!--[if IE 7]>
<div class="box">
<![endif]-->
ie6&ie7 hack
css屬性前綴法：
.box{
*color:red;
}
選擇器前綴法：
@media .box\9{
color:red;
}
IE條件注釋法：
<!--[if lte 7]>
<div class="box">
<![endif]-->
其他更多請查閱http://browserhacks.com/
3 . 列舉幾種 瀏覽器兼容問題
- inline-block在ie8以上才得以支持少漆。
- 偽類before和after ie8部分支持臼膏，以上支持。
- 偽類link示损、hover讶请、active和visited使用在非a標簽元素上，IE8以下不支持。
- 所有的html5新增語義化標簽夺溢，對于IE8以下都不支持论巍。
- rgba和opacity設(shè)置透明度。IE8以上支持风响。
- CSS3中新增canvas屬性嘉汰，IE9及以上支持。
- rotate旋轉(zhuǎn)屬性状勤。IE瀏覽器均不支持鞋怀。
- 更多兼容問題caniuse查詢
4 . 針對兼容、多瀏覽器覆蓋有什么看法持搜？漸進增強和優(yōu)雅降級是什么意思密似？
-
兼容多瀏覽器的看法：
1.首先看客戶需求，分析需求葫盼，得出其是否有必要兼容残腌，針對特定瀏覽器的用戶，設(shè)計的人員贫导，以及瀏覽器所占的市場份額抛猫。
2.兼容程度，對于高級的瀏覽器孩灯，我們應該盡可能對頁面的內(nèi)容有高的展示要求闺金，而低版本的瀏覽器，在能夠正常展示的情況下峰档，要求有所降低败匹。
3.總的來說，需要考慮成本和效益之間的問題讥巡。 - 漸進增強：針對低版本的瀏覽哎壳，先實現(xiàn)基本的頁面功能，然后針對高版本的瀏覽器進行添加頁面效果和交互等等功能尚卫，以達到更好的用戶體驗归榕。
- 優(yōu)雅降級：是基于高版本的瀏覽器實現(xiàn)各種功能之后，然后基于低版本的瀏覽器無法兼容高版本瀏覽器的功能吱涉，進行逐步的功能和頁面效果退化刹泄，但在此過程中要保證基本的頁面功能。
5 . reset.css和normalize.css分別是做什么的怎爵？為什么推薦使用 nomalize.css?
- reset.css：各個標簽特石，元素在各瀏覽器中的默認樣式不同，造成它們?nèi)ヤ秩鞠嗤脑创a渲染出不同的效果鳖链，為消除這種效果姆蘸，reset.css將所有的元素的默認樣式清除墩莫，再由開發(fā)者重新定義。
- normalize.css：normalize,css的理念是盡量保存瀏覽器的默認樣式逞敷，而不進行太多的重置狂秦，但它所提供的默認樣式讓各個瀏覽器保持了高度的一致，相對于傳統(tǒng)的reset.css推捐，它是一種新型的裂问，為html5準備的優(yōu)質(zhì)替代方案。
-
normalize.css的優(yōu)勢：
1）.保護有用的瀏覽器默認樣式而不是完全去掉它們
2）.一般化的樣式：為大部分HTML元素提供
3）.修復瀏覽器自身的bug并保證各瀏覽器的一致性
4）.使用一些小技巧優(yōu)化css的可用性
5）.解釋代碼：用注釋和詳細的文檔來
6 . IE盒模型和標準盒模型的區(qū)別? 怎樣使 IE7牛柒、8使用標準盒模型?box-sizing:border-box 的作用
-
IE盒模型和標準盒模型的區(qū)別：
計算元素的寬度上有所不同
1堪簿，IE：寬度=邊框+padding+內(nèi)容
2，W3C盒模型：寬度=內(nèi)容寬度 - 通過在整個頁面的頭部添加<!doctype html>皮壁，來使 IE7椭更、8使用標準盒模型
- box-sizing:border-box的作用是，在標準盒子模型下蛾魄，把邊框和padding都放進盒子中虑瀑，相當于在標準盒模型中用IE的盒模型來計算，即一個塊級元素實際所占寬高度= 邊界寬度(border-width) + 內(nèi)邊距（padding）+ 高度（height） / 寬度（width）
關(guān)于操作
1 . virtualbox 安裝 xp 虛擬機
2 . 在 IE 7畏腕、8 中展示 盒模型、inline-block茉稠、max-width的區(qū)別
盒模型：在IE6/7/8下使用<!DOCTYPE html>后描馅，它們都會使用標準的盒模型，不存在兼容性問題而线。
依然使用這段代碼來測試：
<div class="box"></div>
.box {
width: 100px;
height: 100px;
margin: 100px;
padding: 20px;
border: 20px solid blue;
background-color: red;
}
IE6：
IE7：
IE8：
inline-block
測試代碼：
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box {
width: 50px;
height: 50px;
margin: 20px;
padding: 2px;
border:2px solid blue;
background-color: red;
display: inline-block;
}
IE6不兼容inline-block铭污，保持為block進行渲染顯示
IE7表現(xiàn)結(jié)果與IE6相同
IE8下支持inline-block屬性
max-width
代碼：
<div class="box">##本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請注明來源０蚶骸｀谀！##本文版權(quán)歸多彩和饑人谷所有誓竿，轉(zhuǎn)載請注明來源０跬！筷屡！##本文版權(quán)歸多彩和饑人谷所有涧偷，轉(zhuǎn)載請注明來源！１兴馈燎潮！##本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請注明來源６筇取Ｈ贩狻！##本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請注明來源ＷΥＱ赵！##本文版權(quán)歸多彩和饑人谷所有腥放，轉(zhuǎn)載請注明來源７盒ァ！秃症！##本文版權(quán)歸多彩和饑人谷所有候址，轉(zhuǎn)載請注明來源！Ｖ指獭岗仑！##本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請注明來源＞矍搿＼瘛！</div>
.box {
max-width: 200px;
margin: 20px;
padding: 2px;
border:2px solid blue;
background-color: red;
display: inline-block;
}
IE6會忽略所設(shè)置的最大寬度的值驶赏，而自適應寬度
IE7:
IE8支持該屬性炸卑，會嚴格遵循這個最大寬度的規(guī)定
- 參考
CSS Tools & Techniques
知乎：怎樣可以很好地保證網(wǎng)頁的瀏覽器兼容性
讓我們談一談 Normalize.css
知乎: Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別
