- 如何調(diào)試 IE 瀏覽器
- 如何在IE瀏覽器內(nèi)調(diào)試代碼
-
IE8及以上可以使用開發(fā)者工具
console - 在低版本的IE瀏覽器中可以用
border: 1px solid;為調(diào)試元素加邊框來起到調(diào)試的目的
-
- 如何測試在IE瀏覽器中的兼容性
-
使用IE Tester模擬IE的環(huán)境，可以從IE5到IE11，缺點是不夠準(zhǔn)確，而且也不能調(diào)試JS
IE TESTER - 使用虛擬機，在虛擬機中安裝舊版操作系統(tǒng)和瀏覽器
-
自己安裝虛擬機
Vitual Box - 對低版本IE有兼容需求的公司會架設(shè)遠(yuǎn)程的虛擬機供員工進行調(diào)試
-
利用高版本IE的文本模式，例如IE8就可以選擇IE8的標(biāo)準(zhǔn)模式或者IE7的標(biāo)準(zhǔn)模式
IE8文本模式
-
-
- 如何在IE瀏覽器內(nèi)調(diào)試代碼
- 什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
- 因為早期不同瀏覽器的渲染標(biāo)準(zhǔn)不一致，導(dǎo)致同樣的CSS語句在不同的瀏覽器當(dāng)中有不同的表現(xiàn)，為了解決這些歷史遺留下來的問題，就利用瀏覽器的BUG去解決這些問題，這就叫做CSS hack
- CSS hack 分類
- Property/Value Hacks
在CSS的屬性值前面加入只有低版本的瀏覽器才認(rèn)識的符號，例如
.selector { *property: value; }在屬性前面加星號在一般瀏覽器當(dāng)中不被認(rèn)可，但是在IE7及以下的版本會認(rèn)為這是合法的語句，會得到執(zhí)行
Property/Value hack- IE CC（Conditional comments）
在HTML中可以把對低版本IE寫的樣式添加在IE的條件注釋當(dāng)中，例如
<!--[if IE]> <link rel="stylesheet" href="#"> <![endif]-->這樣的注釋只有在IE中才被認(rèn)可，在其他瀏覽器中會被當(dāng)成一般注釋
IE CC - Property/Value Hacks
- 在IE6、7的hack方式
- Prooerty/Vaule hack
IE<=7
- Prooerty/Vaule hack
.selector { !property: value; } .selector { $property: value; } .selector { &property: value; } .selector { *property: value; } .selector { )property: value; } .selector { =property: value; } .selector { %property: value; } .selector { +property: value; } .selector { @property: value; } .selector { ,property: value; } .selector { .property: value; } .selector { /property: value; } .selector { `property: value; } .selector { ]property: value; } .selector { #property: value; } .selector { ~property: value; } .selector { ?property: value; } .selector { :property: value; } .selector { |property: value; }
IE6-8.selector { property: value !ie; }.selector { property: value\9; } .selector { property/*\**/: value\9; }
其中l(wèi)t、lte、gt、gte分別表示less than、less than equal、greter than、greater than equal2. Conditional Comments
IE<=7
IE6<!--[if lte IE 7]> <link rel="stylesheet" href="#"> <![endif]-->
IE7<!--[if IE 6]> <link rel="stylesheet" href="#"> <![endif]--><!--[if lte IE 7]> <link rel="stylesheet" href="#"> <![endif]--> - 列舉幾種瀏覽器兼容問題
-
opacity屬性在IE8只有部分支持，即可以用filter屬性達到同樣的效果
can i use
在chrome下的表現(xiàn)
chrome
在IE11中文檔模式下看到的IE8
IE8表現(xiàn)
通過查詢知道在IE8，可以使用
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
IE8透明
2.
display: inline-block;在IE6、7沒有效果
can i use
在chrome的表現(xiàn)
chrome
在IE7的表現(xiàn)
IE7
在IE6、7中只有默認(rèn)行內(nèi)元素才可以有
display: inline-block;的效果，可以用以下代碼解決
*display: inline;
zoom: 1;
實現(xiàn)后的效果
實現(xiàn)display: inline-block;
-
針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思？
- 對于瀏覽器的兼容，首先要做好調(diào)研，判斷自己的產(chǎn)品到底有沒必要對瀏覽器進行兼容，而且兼容到哪些程度。例如，我的產(chǎn)品受眾大部分是年輕人，那么年輕人中可能使用的瀏覽器版本比較新，那么我就不需要對IE早期的版本進行兼容。判斷的方法有多種，可以根據(jù)使用百分比判斷，例如淘寶，當(dāng)一個瀏覽器版本使用人數(shù)不足3%的時候，就不進行兼容。還有如果我需要兼容，那么我要兼容到哪個程度，例如兼容需求的等級有A級（意味著對PSD百分百實現(xiàn)，例如Chrome/FF/IE9），B級（功能實現(xiàn)，頁面表現(xiàn)差別不大，例如IE8），C級（只要求能實現(xiàn)基本的功能，例如IE7）
- 漸進增強和優(yōu)雅降級
- 逐漸增強的意思是在低版本的瀏覽器可以實現(xiàn)基本的功能的基礎(chǔ)上構(gòu)建網(wǎng)頁，然后在高版本的瀏覽器實現(xiàn)新的特性來增加更好的用戶體驗。逐漸增強的思想是內(nèi)容為主，一個網(wǎng)站的本質(zhì)是其要所表現(xiàn)的內(nèi)容
- 優(yōu)雅降級的意思是為高版本的瀏覽器實現(xiàn)新的特性的原則上，在低版本的瀏覽器犧牲一些用戶體驗來實現(xiàn)基本的功能。優(yōu)雅降級的思想是用戶體驗為主，雖然回退方案可以保證兼容各瀏覽器，但是并不能保證在低端瀏覽器的使用體驗，只是看起來在各個瀏覽器的表現(xiàn)一樣了
-
reset.css和normalize.css分別是做什么的？為什么推薦使用nomalize.css?- 兩種方法都是為了使頁面在不同的瀏覽器下的表現(xiàn)一致
-
reset.css是將所有的瀏覽器自帶樣式重置掉，用一切歸零的方法來實現(xiàn)頁面在不同瀏覽器的表現(xiàn)一致 -
normalize.css的方式不是一棒子打死，而是保留用的默認(rèn)樣式，去掉不需要的樣式
-
-
normalize.css的優(yōu)點
<blockquote>1. Normalize.css 保護了有價值的默認(rèn)值
Reset通過為幾乎所有的元素施加默認(rèn)樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個元素在不同的瀏覽器中有不同的默認(rèn)值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符。</blockquote>
<blockquote>2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關(guān)于這一點，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。</blockquote>
<blockquote>3. Normalize.css 不會讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準(zhǔn)則中對多選擇器的使用時非常謹(jǐn)慎的，我們僅會有目的地對目標(biāo)元素設(shè)置樣式。</blockquote>
<blockquote>4. Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）。</blockquote>
<blockquote>5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試。</blockquote>
- 兩種方法都是為了使頁面在不同的瀏覽器下的表現(xiàn)一致
-
IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用？
-
IE盒模型的width=border+padding+content,標(biāo)準(zhǔn)盒模型的width=content;
盒模型 - 在html的頭部加入DOCTYPE就可以使用IE678的標(biāo)準(zhǔn)模式，標(biāo)準(zhǔn)模式所使用的和模型就是W3C的標(biāo)準(zhǔn)盒模型
- box-sizing屬性是用來改變默認(rèn)的盒模型寬高的計算方式，可用來模擬那些非正確支持標(biāo)準(zhǔn)盒模型的瀏覽器的表現(xiàn)，這個屬性的值有兩個
<blockquote>content-box|border-box</blockquote>- content-box，默認(rèn)的值，作用就是使用W3C標(biāo)準(zhǔn)的盒模型，width=content
- border-box，這個屬性可以是寬高的計算方式變成width=border+padding+content，也就是IE在怪異模式下使用的盒模型
-
div {
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
border: 50px solid green;
box-sizing: border-box;
}
border-box
操作
-
virtualbox 安裝 xp 虛擬機
虛擬機
