問答題
1.如何調(diào)試 IE 瀏覽器
- IE瀏覽器7+自帶的開發(fā)者工具，IE6可以采用border的方法或是下載virtural IE6進(jìn)行輔助開發(fā)
- 采用模擬器的方式去模擬不同版本下的IE瀏覽器，如IEtester或chrome的付費(fèi)插件Test IE
- 通過安裝虛擬機(jī)的方式，安裝不同版本的IE的運(yùn)行環(huán)境去達(dá)到調(diào)試IE瀏覽器的目的
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
為了解決不同瀏覽器或是瀏覽器不同版本的網(wǎng)頁解析方式不一的問題，開發(fā)者撰寫相應(yīng)的css code而達(dá)到兼容目的，這整個(gè)過程叫做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.列舉幾種瀏覽器兼容問題
- 不同瀏覽器的標(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
- 透明度的問題：
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ì)特定瀏覽器的用戶
包括頁面的用戶、參與設(shè)計(jì)的人員、用戶的瀏覽器類型使用狀況等
- 兼容程度，對(duì)于高級(jí)瀏覽器頁面的內(nèi)容展示要求要高，對(duì)于低級(jí)瀏覽器可以在不影響正常頁面展示前提下有所降低
- 總的原則是，基于成本與效益間的權(quán)衡考慮
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的觀點(diǎn)比較
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都是出于為不同瀏覽器提供兼容方案的目的，只是在實(shí)際開發(fā)時(shí)的思路不同。
- 漸進(jìn)增強(qiáng)是基于低級(jí)瀏覽器進(jìn)行開發(fā)，在滿足其內(nèi)容、樣式和交互的需求后，針對(duì)更加高級(jí)的瀏覽器實(shí)現(xiàn)設(shè)計(jì)、交互等的強(qiáng)化。
- 優(yōu)雅降級(jí)是基于高級(jí)瀏覽器進(jìn)行開發(fā)，在完成高級(jí)瀏覽器的各項(xiàng)要求后，針對(duì)低級(jí)瀏覽器無法支持高版本功能的問題，實(shí)現(xiàn)功能、設(shè)計(jì)等模塊的逐步退化，并在退化過程中能求保證網(wǎng)頁的基本功能和信息的實(shí)現(xiàn)。
---
#### 5.reset.css和normalize.css分別是做什么的？為什么推薦使nomalize.css?
首先，由于不同的瀏覽器或是瀏覽器的不同版本在支持和渲染頁面時(shí)出現(xiàn)的差異，導(dǎo)致開發(fā)者需要進(jìn)行瀏覽器的兼容。針對(duì)這一問題，網(wǎng)絡(luò)的大牛們想方設(shè)法出不同的解決方案，reset.css和normalize.css這兩種不同思路的解決兼容性問題的方案應(yīng)運(yùn)而生。
- reset.css是早期的解決不同瀏覽器默認(rèn)樣式不一的問題的方案，主要思路是在css文檔的初始部分重置不同元素的樣式，使得不同的瀏覽器在初始樣式上統(tǒng)一標(biāo)準(zhǔn)。但是這一方法的缺陷是過于暴力，把所有元素同一對(duì)待，一旦要使用如ul標(biāo)簽的前綴時(shí)，又得重新設(shè)置，浪費(fèi)資源。
- 此時(shí)，一種新的解決這一問題的思路誕生——normalize.css。normalize.css在保留有用的瀏覽器默認(rèn)樣式的基礎(chǔ)上，為不同瀏覽器提供通用樣式的規(guī)范，即給定通用的樣式，針對(duì)不同瀏覽器出現(xià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是解決瀏覽器兼容的最新也是目前來看最好的方案！
---
#### 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的值