一蛹含、如何調(diào)試 IE 瀏覽器
- IE7以上版本自帶的開發(fā)者工具，IE6可以用border的方法；
例：IE11的開發(fā)者工具
- 采用模擬器的方式去模擬不同版本下的IE瀏覽器壁查，如ietester焰盗；
例：ietester
- 通過安裝虛擬機(jī)的方式璧尸，安裝不同版本的IE運(yùn)行環(huán)境去達(dá)到調(diào)試IE瀏覽器的目的。
例：用虛擬機(jī)安裝不同版本瀏覽器
高版本IE瀏覽器的開發(fā)者工具很不錯(cuò)熬拒，可以選擇不同版本模式進(jìn)行調(diào)試爷光；ietester可以創(chuàng)建不同版本的瀏覽器，但感覺不是很好用澎粟；個(gè)人還是比較喜歡用虛擬機(jī)安裝不同版本瀏覽器的方式蛀序，感覺更真實(shí)。
二活烙、什么是CSS hack徐裸？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6啸盏、ie7的 hack 方式重贺？
-
什么是CSS hack
由于不同廠商的瀏覽器或某瀏覽器的不同版本（如IE6-IE11，F(xiàn)irefox回懦，Safari气笙，Opera，Chrome等）怯晕，對(duì)CSS的支持潜圃、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果贫贝。這時(shí)秉犹，我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果，就需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式稚晚，我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程崇堵，叫做CSS hack。
-
CSS hack的原理
由于不同瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣客燕，以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響鸳劳，我們可以據(jù)此針對(duì)不同的瀏覽器情景來應(yīng)用不同的CSS。
-
在 CSS 和 HTML里如何寫 hack
CSS hack大致有3種表現(xiàn)形式也搓，CSS屬性前綴法赏廓、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的傍妒。
-
屬性前綴法（即內(nèi)部Hack）：
在CSS樣式屬性名前加上只有特定瀏覽器在能識(shí)別的hack前綴幔摸，以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果。
.container{ _color: red;/*IE6識(shí)別*/ *color: red;/*IE6,IE7識(shí)別*/ color: red\9;/*IE6-IE10識(shí)別*/ color: red\0;/*IE8-IE10識(shí)別*/ color: red\9\0;/*IE9,IE10識(shí)別*/ } -
選擇器前綴法（即選擇器hack）：
針對(duì)一些頁(yè)面不一致或者需要特殊對(duì)待的瀏覽器颤练，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack既忆。
*html{}/*只對(duì)IE6生效*/ *+html{}/*只對(duì)IE7生效*/ -
IE條件注釋法（即HTML條件注釋hack）：（注：IE10+已經(jīng)不再支持條件注釋）這類hack不僅對(duì)CSS生效，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
只在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]-->
-
-
在 CSS 中 ie6患雇、ie7的 hack 方式
- IE6
-
屬性前綴法：
.box{ _color: red;/*for IE6*/ } -
選擇器前綴法：
*body{}/*for IE6*/ -
條件注釋法：
<head> <!--[if IE 6]> <body class="ie6"> <![endif]--> </head>
-
- IE7
-
選擇器前綴法：
*+body{}/*for IE7*/ -
條件注釋法：
<head> <!--[if IE 7]> <body class="ie7"> <![endif]--> </head>
-
- IE6~IE7
-
屬性前綴法：
.box{ *color: red;/*for IE6~7*/ } -
選擇器前綴法：
@media screen\9{...} -
條件注釋法：
<head> <!--[if lte IE 7]> <body class="ie6 ie7"> <![endif]--> </head>
-
- IE6
參考：
史上最全的CSS hack方式一覽
Browserhacks
三跃脊、列舉幾種瀏覽器兼容問題
-
不同瀏覽器的默認(rèn)標(biāo)簽的margin和padding不同
解決辦法：*{margin: 0; padding: 0;}備注：這是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題。
塊級(jí)元素設(shè)置float后苛吱，又有左右margin的情況下酪术，IE6顯示的margin比設(shè)置的大
解決辦法：在float的標(biāo)簽樣式中加入display: inline;將其轉(zhuǎn)化為行內(nèi)元素
備注：我們最常用的就是div+css布局了，而div就是一個(gè)典型的塊級(jí)元素翠储，橫向布局時(shí)我們通常都是用div float實(shí)現(xiàn)的绘雁，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題彰亥。設(shè)置較小高度的標(biāo)簽（一般小于10px）咧七，在IE6衰齐、IE7中高度超出自己設(shè)置的高度
解決辦法：給超出高度的標(biāo)簽設(shè)置overflow: hidden;或者設(shè)置行高line-height小于設(shè)置的高度
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里任斋。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的耻涛，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高废酷。行內(nèi)元素，設(shè)置
display: block;后采用float布局抹缕，又有左右margin的情況澈蟆，IE6顯示的margin比設(shè)置的大
解決辦法：在display: block;后面加入display: inline; display: table;
備注：行內(nèi)元素，為了設(shè)置寬高卓研，我們需要設(shè)置display: block;（除了input標(biāo)簽比較特殊）趴俘。在float布局并有橫向的margin后，在IE6下奏赘，它就具有了塊級(jí)元素float后的橫向margin的bug寥闪。不過因?yàn)樗旧砭褪切袃?nèi)元素，所以我們?cè)偌由?code>display: inline;的話磨淌，它的高度就不可設(shè)了疲憋。這時(shí)候我們還需要在display: inline;后面加入display: table;圖片默認(rèn)有間距：幾個(gè)img標(biāo)簽放在一起時(shí)，有些瀏覽器會(huì)有默認(rèn)的間距梁只，加了
margin:0; padding:0;也不起作用
解決辦法：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)標(biāo)簽缚柳，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行搪锣，但是部分瀏覽器的img標(biāo)簽之間會(huì)個(gè)間距秋忙。標(biāo)簽設(shè)置min-height不兼容
解決辦法：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto!important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開發(fā)時(shí)构舟，有很多情況下我們有這種需求灰追。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)，容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)监嗜，容器高度被撐高谐檀，而不是出現(xiàn)滾動(dòng)條。這時(shí)我們就會(huì)面臨這個(gè)兼容性問題裁奇。-
透明度的問題
解決辦法：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; }
四桐猬、針對(duì)兼容、多瀏覽器覆蓋有什么看法刽肠？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思溃肪？
- 對(duì)兼容、多瀏覽器覆蓋的看法：
首先要針對(duì)項(xiàng)目本身進(jìn)行調(diào)研音五，查看目標(biāo)人群使用的瀏覽器情況惫撰，一般情況對(duì)于使用人群小于5%的就可以忽略了，因?yàn)樗^的兼容和覆蓋全部瀏覽器這本身就是不現(xiàn)實(shí)的躺涝，而且涉及到時(shí)間和成本的問題厨钻，還有一些暫時(shí)無法解決的兼容性bug等，這些都需要綜合考慮坚嗜。 - 漸進(jìn)增強(qiáng)（progressive enhancement）：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面夯膀，保證最基本的功能，然后在針對(duì)高級(jí)瀏覽器進(jìn)行效果苍蔬、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)诱建。
- 優(yōu)雅降級(jí)（graceful degradation）：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容碟绑。
- 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始俺猿，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非掣裰伲基礎(chǔ)的押袍，能夠起作用的版本開始，并不斷擴(kuò)充抓狭，以適應(yīng)未來環(huán)境的需要伯病。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看否过，同時(shí)保證其根基處于安全地帶午笛。
參考
知乎：怎樣可以很好地保證網(wǎng)頁(yè)的瀏覽器兼容性
五、reset.css和normalize.css分別是做什么的苗桂？為什么推薦使用 nomalize.css?
-
reset.css是通過重新定義標(biāo)簽樣式药磺，把瀏覽器的默認(rèn)樣式覆蓋掉，以便保持個(gè)瀏覽器渲染的一致性煤伟。相對(duì)暴力
normalize.css是reset.css的替代方案癌佩，保留有用的瀏覽器默認(rèn)樣式木缝，重置掉該重置的樣式，同時(shí)進(jìn)行一些bug的修復(fù)围辙。相對(duì)平和引用知乎上的回答：
CSS Reset是革命黨我碟，CSS Reset里最激進(jìn)那一派提倡不管你小子有沒有用，通通給我脫了那身衣服姚建，憑什么你body出生就穿一圈margin矫俺，憑什么你姓h的比別人吃得胖，憑什么你ul戴一胳膊珠子掸冤。于是
*{margin:0;}等等運(yùn)動(dòng)厘托，全把人家拍扁了「迨看似是眾生平等了铅匹，實(shí)則是浪費(fèi)了資源又占不到便宜，有求于人家的時(shí)候還得賤賤地給加回去饺藤，實(shí)在需要人家的默認(rèn)樣式了怎么辦包斑？人家過都扔爐子里燒了，自己看著辦吧策精。
Normalize.css是改良派舰始。他們提倡，各個(gè)元素都有其存在的道理咽袜，簡(jiǎn)單粗暴地一視同仁是不好的。body那一圈確實(shí)擠壓了頁(yè)面的生存空間枕稀，那就改掉询刹。士農(nóng)工商，誰(shuí)有誰(shuí)的作用萎坷，給他們指定個(gè)規(guī)范凹联，確保他們?cè)谌魏螢g覽器里都干好自己的活兒。
知乎: Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別
- Normalize vs Reset
- Normalize.css保護(hù)了有價(jià)值的默認(rèn)值
Reset通過為幾乎所有的元素施加默認(rèn)樣式哆档，強(qiáng)行使得元素有相同的視覺效果蔽挠。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式瓜浸。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式澳淑。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合插佛。 - Normalize.css修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動(dòng)端瀏覽器的bug杠巡。這往往超出了Reset所能做到的范疇。關(guān)于這一點(diǎn)雇寇，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置氢拥、預(yù)格式化文字的font-size問題蚌铜、在IE9總SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的表單相關(guān)的bug嫩海。 - Normalize.css不會(huì)讓你的調(diào)試工具變得雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈冬殃。在Normalize.css中就不會(huì)有這樣的問題，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用是非常謹(jǐn)慎的叁怪，我們僅會(huì)有目的地對(duì)目標(biāo)元素設(shè)置樣式造壮。 - Normalize.css是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值骂束。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用的部分（比如表單的一般化）耳璧。 - Normalize.css擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試。這個(gè)文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步說明展箱。這意味著你可以找到每一行代碼具體完成了什么工作旨枯、為什么要寫這句代碼、瀏覽器之間的差異混驰，并且你可以更容易地進(jìn)行自己的測(cè)試攀隔。
這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染栖榨。
- Normalize.css保護(hù)了有價(jià)值的默認(rèn)值
六昆汹、IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
- IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別
IE盒模型：寬度（width）=邊框（border）+內(nèi)邊距（padding）+內(nèi)容寬度（content）
標(biāo)準(zhǔn)盒模型：寬度（width）=內(nèi)容寬度（content） - 怎樣使IE678使用標(biāo)準(zhǔn)盒模型
IE不添加doctype時(shí)（怪異模式）使用的是IE盒模型，要想使IE678使用標(biāo)準(zhǔn)盒模型婴栽，給IE678添加doctype即可满粗。 -
box-sizing: border-box;是CSS3新增屬性，設(shè)置此屬性之后愚争，相當(dāng)于以怪異模式解析映皆。
通常一個(gè)塊級(jí)元素實(shí)際所占寬高度=外邊距（margin）+邊框（border）+內(nèi)邊距（padding）+寬/高度（width/height）
如果設(shè)置了box-sizing: border-box;，實(shí)際所占寬高度=寬高度（width/height）+外邊距（margin）
如圖所示：
操作
1. virtualbox 安裝 xp 虛擬機(jī)
用Virtualbox虛擬機(jī)安裝Windows XP/7轰枝、Win7系統(tǒng)詳細(xì)圖文教程
網(wǎng)上下載的很多XP系統(tǒng)都是默認(rèn)的IE8瀏覽器捅彻，而且沒法卸載，安裝純凈版的XP系統(tǒng)就可以很方便的卸載IE8還原到IE6鞍陨。
系統(tǒng)之家 GHOST XP SP3 純凈版 V2014.12
VirtualBox啟動(dòng)虛擬機(jī)報(bào)錯(cuò)0x80004005
虛擬機(jī)與主機(jī)共享粘貼板、拖放诚撵，還需安裝增強(qiáng)工具包
如何為VirtualBox安裝 Guest Additions/增強(qiáng)工具包/功能增強(qiáng)包/增強(qiáng)功能包
2. IE盒模型
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>盒模型</title>
<style>
.box{
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<html>
下面通過設(shè)置固定寬高缭裆，改變marging、padding砾脑、border來展示IE盒模型：
3. inline-block
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>inline-block</title>
<style>
.inline-block{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="inline-block"></div>
<div class="inline-block"></div>
<a class="inline-block" href=""></a>
<a class="inline-block" href=""></a>
</body>
<html>
- IE8
IE8支持inline-block
但是IE8兼容性視圖中幼驶，對(duì)塊級(jí)元素設(shè)置`inline-block`不起作用，如圖所示：
- IE7
IE7也是塊級(jí)元素不支持inline-block,行內(nèi)元素支持韧衣，如圖：
- IE6
IE6也是塊級(jí)元素不支持inline-block,行內(nèi)元素支持
4. max-width
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>max-width</title>
<style>
.block{
display: block;
max-width: 100px;
max-height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
.inline-block{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="block">
</div>
<div class="inline-block">max</div>
<a class="block" href="">max</a>
<a class="inline-block" href="">max</a>
</body>
<html>
- IE8
IE8中塊級(jí)元素不支持max-width盅藻，瀏覽器自動(dòng)將max-width解析為width购桑。設(shè)置了inline-block的元素支持max-width
- IE7
IE7中塊級(jí)元素不支持max-width，瀏覽器自動(dòng)將max-width解析為width氏淑。設(shè)置了inline-block的行內(nèi)元素支持max-width
- IE6
IE6中塊級(jí)元素不支持max-width,瀏覽器并未將max-width解析為width勃蜘。設(shè)置了inline-block的行內(nèi)元素支持max-width
本文版權(quán)屬吳天喬所有，轉(zhuǎn)載務(wù)必注明出處假残。
