一加袋、問答部分
1. 如何調(diào)試 IE 瀏覽器
-
IE7及以上版本有調(diào)試臺哥艇，可以按F12啟動谐腰。
Paste_Image.png - 沒有調(diào)試臺的
通過設(shè)置 邊框顏色和背景色進(jìn)行代碼調(diào)試显设。 - 通過安裝模擬器模擬不同版本的ie框弛，微軟官方有諸如virtual pc、Expression Web SuperPreview等捕捂。通常用的比較多的ietester瑟枫。
能夠集成不同版本的瀏覽器，但是權(quán)威性不足指攒。 - 虛擬機(jī)慷妙，安裝帶有不同版本IE的系統(tǒng)
對宿機(jī)要求比較高，安裝成本較高一點(diǎn)允悦。
2. 什么是CSS hack膝擂？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式架馋？
1)狞山、什么是CSS hack
CSS樣式表的在各大瀏覽器中的表現(xiàn)不是完全一樣的，因為各個瀏覽器及瀏覽器各個版本（如IE6-IE11叉寂，chrome萍启，opera，firefox屏鳍，safari）勘纯，對于CSS的解析支持不一樣，這就導(dǎo)致了在不同瀏覽器或者不同版本中孕蝉，CSS的顯示效果不一樣屡律，這時我們?yōu)榱双@得一致的CSS效果腌逢，就利用一些BUG或者特定樣式去達(dá)到一樣的效果降淮，這個coding過程，我們稱之為CSS hack搏讶。
2)佳鳖、在 CSS 和 HTML里如何寫 hack？
CSS Hack大致有3種表現(xiàn)形式：
- CSS屬性前綴法
由于IE發(fā)展較早媒惕，早期版本對于CSS的解析有部分沒加嚴(yán)格限制系吩，成為了歷史遺留問題，利用這些BUG可以對某些CSS屬性寫CSS hack以達(dá)到效果妒蔚。
.container{
_color: red;/*IE6識別*/
*color: red;/*IE6,IE7識別*/
color: red\9;/*IE6-IE10識別*/
color: red\0;/*IE8-IE10識別*/
color: red\9\0;/*IE9,IE10識別*/
}
- 選擇器前綴法
（即選擇器hack）選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器穿挨，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack。
*html{}/*只對IE6生效*/
*+html{}/*只對IE7生效*/
- IE條件注釋法（即HTML頭部引用if IE）Hack肴盏，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的科盛。
（即HTML條件注釋hack）：（注：IE10+已經(jīng)不再支持條件注釋）這類hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效菜皂。 - 只在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]-->
3)榨崩、在 CSS 中 ie6母蛛、ie7的 hack 方式
- IE6
- 屬性前綴法
.box{
_color: red;/*for IE6*/
}
- 選擇器前綴法
*body{}/*for IE6*/
- 條件注釋法
<!--[if IE 6]>
<body class="ie6">
<![endif]-->
-
IE7
- 選擇器前綴法
*+body{}/*for IE7*/
- 條件注釋法
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
-
IE6~IE7
- 屬性前綴法
.box{
*color: red;/*for IE6~7*/
}
- 選擇器前綴法
@media screen\9{...}
- 條件注釋法
<!--[if lte IE 7]>
<body class="ie6 ie7">
<![endif]-->
4)彩郊、ps：
CSS hack現(xiàn)在用的越來越少，能不用盡量不用，可以用最少的hack去實現(xiàn)多瀏覽器兼容的頁面焦辅。所以不需要花很大精力去記博杖，有這個概念，遇到了知道怎么查怎么解決就行筷登。例如星號是做ie67的hack剃根，下劃線是ie6的hack。
3. 列舉幾種 瀏覽器兼容問題
-
inline-block
inline-block對于IE6前方、IE7并不支持狈醉，解決方法是優(yōu)雅降級，將display屬性值在IE6惠险、7下寫為display: inline;
inline元素的display屬性設(shè)置為inline-block時苗傅，所有的瀏覽器都支持；
block元素的display屬性設(shè)置為inline-block時班巩，IE6/IE7瀏覽器是不支持的渣慕。
解決方式一
*display: inline; /* 將塊級元素設(shè)置為內(nèi)聯(lián)對象呈遞。*/
*zoom: 1; /* 觸發(fā)haslayout */
解決方式二
先使用display: inline-block;
屬性觸發(fā)塊級元素逊桦，然后再定義display:inline;寺渗，讓塊元素呈遞為內(nèi)聯(lián)對象。需要注意的是转砖，兩個display 要先后放在兩個CSS聲明中才有效果汞窗，順序也不能反蝌焚。
div{
display: inline-block;
*display: inline;
}
-
透明度bug
IE8及以下版本不支持opacity屬性劳坑，可使用filter:alpha(opacity=50)替代
div{
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;
}
-
雙外邊距浮動bug
這也是很常見的bug，網(wǎng)上給出數(shù)據(jù)出現(xiàn)頻率90%，是IE6和更低版本額雙外邊距浮動bug银舱。在設(shè)置好浮動后茄袖，元素的外邊距加倍
- 不同瀏覽器的默認(rèn)標(biāo)簽的margin和padding不同
解決辦法
*{
margin: 0;
padding: 0;
}
- 標(biāo)簽設(shè)置min-height不兼容解決辦法
如果我們要設(shè)置一個標(biāo)簽的最小高度200px蝗羊，需要進(jìn)行的設(shè)置為：
{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}
4. 針對兼容业崖、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級是什么意思摇锋？
針對兼容、多瀏覽器覆蓋有什么看法剑刑？CSS作為一種語言，設(shè)計成有很強(qiáng)的向前兼容性，無論是瀏覽器覆蓋還是兼容都是解決bug的很好的方式狸驳，但是不應(yīng)該過分信賴于hack和過濾器酥馍，因為并非掌握hack越多，自己的水平就越高。各個瀏覽器猾骡，各個版本购啄，以及各個網(wǎng)頁html千差萬別曼振，動一發(fā)則牽全身，所以要明智且受控制地應(yīng)用hack和過濾器。之所以這么說，是因為如果CSS文件短小且簡單妖枚，并且只需要應(yīng)用很少個hack的話，那么放在主CSS文件中加以注釋說明可能是安全的；但是之前說過，hack往往過于復(fù)雜井佑，使代碼很難閱讀焦蘑，所以最好將他們放在他們自己的樣式表中，不但容易閱讀，而且便于維護(hù)雀彼。但是這樣就增加了工作量，所以建議還是少用hack和過濾器，能不兼容的地方就不兼容，考慮業(yè)務(wù)需求的情況下合理使用兼容涮雷。而至于多瀏覽器覆蓋卿嘲，我認(rèn)為這個是可以合理考慮的盒让，而且經(jīng)常用也未嘗不可，畢竟各大瀏覽器用戶所占份額均不小 左医，這點(diǎn)不容忽視秕硝。
漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后在針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。
優(yōu)雅降級：一開始就針對高版本瀏覽器進(jìn)行頁面構(gòu)建，然后再針對低版本瀏覽器進(jìn)行兼容。區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給崎弃，而漸進(jìn)增強(qiáng)則是從一個非扯羧酰基礎(chǔ)的盆均，能夠起作用的版本開始，并不斷擴(kuò)充漱逸，以適應(yīng)未來環(huán)境的需要缀踪。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看蔗草，同時保證其根基處于安全地帶故觅。
使用策略：也許有各種fallback方案可以保證完全兼容性各個瀏覽器，但依然不能保證低端瀏覽器的使用體驗黔衡，最多是看起來各個瀏覽器都一樣了僚碎。因此栈幸，現(xiàn)在的設(shè)計和開發(fā)的策略是瀏覽器分級支持渣触。優(yōu)先為高端瀏覽器設(shè)計碧注，同時考慮低端瀏覽器的退化方案。甚至有些復(fù)雜的應(yīng)用可以拒絕ie6柿冲，提示用戶使用高端瀏覽器行您。
5. reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css：是通過重新定義標(biāo)簽樣式晕窑，把瀏覽器的默認(rèn)樣式覆蓋掉，以便保持個瀏覽器渲染的一致性妇穴。
- normalize.css：是reset.css的替代方案，保護(hù)有用的瀏覽器默認(rèn)樣式，修改瀏覽器自身bug台诗，優(yōu)化可用性。
-
為什么推薦使用 nomalize.css
1）每辟、Normalize 相對「平和」剑辫，注重通用的方案，重置掉該重置的樣式渠欺，保留有用的 user agent 樣式妹蔽，同時進(jìn)行一些 bug 的修復(fù)，這點(diǎn)是 reset 所缺乏的挠将。
2）胳岂、Reset 相對「暴力」，不管你有沒有用舔稀，統(tǒng)統(tǒng)重置成一樣的效果乳丰，且影響的范圍很大，講求跨瀏覽器的一致性内贮。
2）产园、其它
- Normalize.css 保護(hù)了有價值的默認(rèn)值；reset通過為幾乎所有的元素施加默認(rèn)樣式夜郁，強(qiáng)行使得元素有相同的視覺效果什燕。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式竞端。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式变骡。當(dāng)一個元素在不同的瀏覽器中有不同的默認(rèn)值時择卦，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合产弹。
- Normalize.css 修復(fù)了瀏覽器的bug量窘；它修復(fù)了常見的桌面端和移動端瀏覽器的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 不會讓調(diào)試工具變的雜亂募寨；使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈族展。在Normalize.css中就不會有這樣的問題，因為在我們的準(zhǔn)則中對多選擇器的使用時非常謹(jǐn)慎的拔鹰，我們僅會有目的地對目標(biāo)元素設(shè)置樣式仪缸。
- Normalize.css 是模塊化的；這個項目已經(jīng)被拆分為多個相關(guān)卻又獨(dú)立的部分列肢，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值恰画。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）宾茂。
- Normalize.css 擁有詳細(xì)的文檔；Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試拴还。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明跨晴。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼片林、瀏覽器之間的差異端盆，并且你可以更容易地進(jìn)行自己的測試。
6. 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時（怪異模式）使用的是IE盒模型费封，要想使IE678使用標(biāo)準(zhǔn)盒模型焕妙，給IE678添加doctype即可。box-sizing: border-box;是CSS3新增屬性弓摘，設(shè)置此屬性之后访敌，相當(dāng)于以怪異模式解析。
| 值 | 描述 |
|---|---|
| content-box | 這是由 CSS2.1 規(guī)定的寬度高度行為衣盾。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框爷抓。 |
| border-box | 為元素設(shè)定的寬度和高度決定了元素的邊框盒势决。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制蓝撇。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度果复。 |
| inherit | 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。 |
box-sizing: border-box;計算方法為width/height=content+padding+border渤昌，表示指定的寬度和高度包含邊框虽抄、內(nèi)邊距和內(nèi)容區(qū)域。 即IE盒模型算法独柑。
二迈窟、操作部分
1、virtualbox 安裝 xp 虛擬機(jī)
2忌栅、在IE6车酣、IE7、IE8中展示 盒模型索绪、inline-block湖员、max-width的區(qū)別
- 在IE6、IE7瑞驱、IE8中測試的盒模型代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: darkgreen;
border: solid 1px #000000;
padding: 20px;
margin: 30px;
color: #fffdef;
}
</style>
</head>
<body>
<div>
box1
</div>
<div>
box2
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
- 在IE6唤反、IE7凳寺、IE8中測試的
inline-block代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
}
.box1{
background: green;
width: 100px;
height: 100px;
}
.box2{
background: blue;
width: 100px;
height: 100px;
}
.box3{
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
- 在IE6鸭津、IE7、IE8中測試的
max-width代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
}
.box1{
max-width: 100px;
height: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1">
box1box 1box1box1b ox1box1box1box1 box1box1
box1 box1box1 box1box1 box1box1 box1
box1 box1box1 box1box1 box1
box1 box1box1 box1
box1box 1box1box1b ox1box1box1box1 box1box1
box1 box1box1 box1box1 box1box1 box1
box1 box1box1 box1box1 box1
box1 box1box1 box1
</div>
</body>
</html>
在IE6中渲染如下
在IE7中渲染如下
在IE8中渲染如下
** 本教程版權(quán)歸作者和饑人谷所有读第，轉(zhuǎn)載須說明來源曙博！ **
