問(wèn)答題
1.如何調(diào)試 IE 瀏覽器
- IE瀏覽器7+自帶的開(kāi)發(fā)者工具施绎，IE6可以采用border的方法或是下載virtural IE6進(jìn)行輔助開(kāi)發(fā)
- 采用模擬器的方式去模擬不同版本下的IE瀏覽器溯革，如IEtester或chrome的付費(fèi)插件Test IE
- 通過(guò)安裝虛擬機(jī)的方式，安裝不同版本的IE的運(yùn)行環(huán)境去達(dá)到調(diào)試IE瀏覽器的目的
2.什么是CSS hack谷醉？在 CSS 和 HTML里如何寫(xiě) hack鬓照？在 CSS 中 ie6、ie7的 hack 方式孤紧？
為了解決不同瀏覽器或是瀏覽器不同版本的網(wǎng)頁(yè)解析方式不一的問(wèn)題，開(kāi)發(fā)者撰寫(xiě)相應(yīng)的css code而達(dá)到兼容目的拒秘，這整個(gè)過(guò)程叫做css hack
-
css hack大致有三種方法：css屬性前綴法号显、IE條件注釋法和選擇器前綴法
css 屬性前綴法：
.box{
color:red; /* for all browsers /
_color:black; / for ie6 */
color:green; / for ie6~7 /
color:pink\9; / for ie6~10 */
}
選擇器前綴法：
body{
/ only for ie6 */
}
+p{
/ for ie7 /
}
@media screen\9{
div{
/ for ie6~7 */
}
ie cc:
- ie6/7的css hack
- ie6
屬性前綴法：
.box{
_color:black; /* for ie6 */
}
選擇器前綴法：
*body{
margin:0;
}
條件注釋法：
<head>
</head>
- ie7
選擇器前綴法：
*+body{
margin:0;
}
條件注釋法：
<head>
</head>
- ie6~7
屬性前綴法：
.box{
color:black; / for ie6~7 */
}
選擇器前綴法：
@media body\9{
margin:0;
}
條件注釋法：
<head>
</head>
---
#### 3.列舉幾種瀏覽器兼容問(wèn)題
- 不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一，解決方案是```*{margin:0;padding:0;}```
- 塊級(jí)元素使用float以及存在左右margin時(shí)躺酒，IE6顯示的margin比設(shè)定的大押蚤，解決方案是在添加float樣式的標(biāo)簽內(nèi)加入```display:inline;```
- 圖片默認(rèn)間距：有些瀏覽器在多個(gè)img標(biāo)簽放一起時(shí)出現(xiàn)默認(rèn)間距，解決方案是使用float屬性layout
- 透明度的問(wèn)題：
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;
}
- min-width或max-width:ie6不支持最大或最小寬高
/* 最小寬度 /
.min_width{
min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/ 最大寬度 */
.max_width{
max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
---
#### 4.針對(duì)兼容羹应、多瀏覽器覆蓋有什么看法揽碘？**漸進(jìn)增強(qiáng)**和**優(yōu)雅降級(jí)**是什么意思？
- 兼容多瀏覽器的看法：
- 分析需求，是否有兼容的必要性雳刺。針對(duì)特定瀏覽器的用戶
包括頁(yè)面的用戶劫灶、參與設(shè)計(jì)的人員、用戶的瀏覽器類型使用狀況等
- 兼容程度掖桦，對(duì)于高級(jí)瀏覽器頁(yè)面的內(nèi)容展示要求要高本昏，對(duì)于低級(jí)瀏覽器可以在不影響正常頁(yè)面展示前提下有所降低
- 總的原則是，基于成本與效益間的權(quán)衡考慮
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的觀點(diǎn)比較
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都是出于為不同瀏覽器提供兼容方案的目的枪汪，只是在實(shí)際開(kāi)發(fā)時(shí)的思路不同涌穆。
- 漸進(jìn)增強(qiáng)是基于低級(jí)瀏覽器進(jìn)行開(kāi)發(fā)，在滿足其內(nèi)容雀久、樣式和交互的需求后宿稀，針對(duì)更加高級(jí)的瀏覽器實(shí)現(xiàn)設(shè)計(jì)、交互等的強(qiáng)化赖捌。
- 優(yōu)雅降級(jí)是基于高級(jí)瀏覽器進(jìn)行開(kāi)發(fā)祝沸，在完成高級(jí)瀏覽器的各項(xiàng)要求后，針對(duì)低級(jí)瀏覽器無(wú)法支持高版本功能的問(wèn)題巡蘸，實(shí)現(xiàn)功能奋隶、設(shè)計(jì)等模塊的逐步退化，并在退化過(guò)程中能求保證網(wǎng)頁(yè)的基本功能和信息的實(shí)現(xiàn)悦荒。
---
#### 5.reset.css和normalize.css分別是做什么的唯欣？為什么推薦使nomalize.css?
首先，由于不同的瀏覽器或是瀏覽器的不同版本在支持和渲染頁(yè)面時(shí)出現(xiàn)的差異搬味，導(dǎo)致開(kāi)發(fā)者需要進(jìn)行瀏覽器的兼容境氢。針對(duì)這一問(wèn)題，網(wǎng)絡(luò)的大牛們想方設(shè)法出不同的解決方案碰纬，reset.css和normalize.css這兩種不同思路的解決兼容性問(wèn)題的方案應(yīng)運(yùn)而生萍聊。
- reset.css是早期的解決不同瀏覽器默認(rèn)樣式不一的問(wèn)題的方案，主要思路是在css文檔的初始部分重置不同元素的樣式悦析，使得不同的瀏覽器在初始樣式上統(tǒng)一標(biāo)準(zhǔn)寿桨。但是這一方法的缺陷是過(guò)于暴力，把所有元素同一對(duì)待强戴，一旦要使用如ul標(biāo)簽的前綴時(shí)亭螟，又得重新設(shè)置，浪費(fèi)資源骑歹。
- 此時(shí)预烙，一種新的解決這一問(wèn)題的思路誕生——normalize.css。normalize.css在保留有用的瀏覽器默認(rèn)樣式的基礎(chǔ)上道媚，為不同瀏覽器提供通用樣式的規(guī)范扁掸，即給定通用的樣式翘县，針對(duì)不同瀏覽器出現(xiàn)的兼容性問(wèn)題分門(mén)別類的提供優(yōu)化方案。
- 由此谴分，我們可知reset.css就像倚天屠龍記中的七傷拳——欲傷人锈麸，先傷己，reset.css就是欲統(tǒng)一樣式狸剃，先要把自己默認(rèn)樣式破壞個(gè)遍掐隐。
而normalize.css就如同武當(dāng)?shù)奶珮O拳——能夠在統(tǒng)一樣式標(biāo)準(zhǔn)的前提下，保留瀏覽器的默認(rèn)樣式钞馁。
綜上所述虑省，目前normalize.css是解決瀏覽器兼容的最新也是目前來(lái)看最好的方案！
---
#### 6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
- IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別在于：
- IE盒模型的寬高等于margin+padding+conent僧凰，常出現(xiàn)在IE6/7/8怪異模式下
- 標(biāo)準(zhǔn)盒模型寬高等于content探颈，常出現(xiàn)在chrome， IE9+, IE6/7/8(添加 doctype)
- 添加doctype的聲明
- box-sizing規(guī)定以特定區(qū)域定義特定元素的區(qū)域含義
值|描述
---|---
content-box|規(guī)定盒子的寬高為內(nèi)容框的寬高
border-box|規(guī)定盒子的寬高為盒子的邊框
inherit|繼承父元素的box-sizing的值