- 如何調(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烁巫，缺點(diǎn)是不夠準(zhǔn)確巢寡，而且也不能調(diào)試JS
IE TESTER - 使用虛擬機(jī)，在虛擬機(jī)中安裝舊版操作系統(tǒng)和瀏覽器
-
自己安裝虛擬機(jī)
Vitual Box - 對低版本IE有兼容需求的公司會架設(shè)遠(yuǎn)程的虛擬機(jī)供員工進(jì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 方式石洗？
- 因?yàn)樵缙诓煌瑸g覽器的渲染標(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屬性達(dá)到同樣的效果
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;
實(shí)現(xiàn)后的效果
實(shí)現(xiàn)display: inline-block;
-
針對兼容嚣艇、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級是什么意思华弓？
- 對于瀏覽器的兼容食零，首先要做好調(diào)研，判斷自己的產(chǎn)品到底有沒必要對瀏覽器進(jìn)行兼容寂屏，而且兼容到哪些程度贰谣。例如，我的產(chǎn)品受眾大部分是年輕人迁霎，那么年輕人中可能使用的瀏覽器版本比較新吱抚，那么我就不需要對IE早期的版本進(jìn)行兼容。判斷的方法有多種考廉，可以根據(jù)使用百分比判斷秘豹，例如淘寶，當(dāng)一個瀏覽器版本使用人數(shù)不足3%的時候昌粤，就不進(jìn)行兼容既绕。還有如果我需要兼容啄刹，那么我要兼容到哪個程度，例如兼容需求的等級有A級（意味著對PSD百分百實(shí)現(xiàn)岸更，例如Chrome/FF/IE9）鸵膏，B級（功能實(shí)現(xiàn)，頁面表現(xiàn)差別不大怎炊，例如IE8）谭企，C級（只要求能實(shí)現(xiàn)基本的功能，例如IE7）
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級
- 逐漸增強(qiáng)的意思是在低版本的瀏覽器可以實(shí)現(xiàn)基本的功能的基礎(chǔ)上構(gòu)建網(wǎng)頁评肆，然后在高版本的瀏覽器實(shí)現(xiàn)新的特性來增加更好的用戶體驗(yàn)债查。逐漸增強(qiáng)的思想是內(nèi)容為主，一個網(wǎng)站的本質(zhì)是其要所表現(xiàn)的內(nèi)容
- 優(yōu)雅降級的意思是為高版本的瀏覽器實(shí)現(xiàn)新的特性的原則上瓜挽，在低版本的瀏覽器犧牲一些用戶體驗(yàn)來實(shí)現(xiàn)基本的功能盹廷。優(yōu)雅降級的思想是用戶體驗(yàn)為主，雖然回退方案可以保證兼容各瀏覽器久橙，但是并不能保證在低端瀏覽器的使用體驗(yàn)俄占，只是看起來在各個瀏覽器的表現(xiàn)一樣了
-
reset.css和normalize.css分別是做什么的淆衷？為什么推薦使用nomalize.css?- 兩種方法都是為了使頁面在不同的瀏覽器下的表現(xiàn)一致
-
reset.css是將所有的瀏覽器自帶樣式重置掉缸榄，用一切歸零的方法來實(shí)現(xiàn)頁面在不同瀏覽器的表現(xiàn)一致 -
normalize.css的方式不是一棒子打死，而是保留用的默認(rèn)樣式祝拯，去掉不需要的樣式
-
-
normalize.css的優(yōu)點(diǎn)
<blockquote>1. 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)相符碉输。</blockquote>
<blockquote>2. 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膘格。</blockquote>
<blockquote>3. Normalize.css 不會讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈峭范，如下圖所示。在Normalize.css中就不會有這樣的問題瘪贱，因?yàn)樵谖覀兊臏?zhǔn)則中對多選擇器的使用時非常謹(jǐn)慎的纱控，我們僅會有目的地對目標(biāo)元素設(shè)置樣式辆毡。</blockquote>
<blockquote>4. Normalize.css 是模塊化的
這個項(xiàng)目已經(jīng)被拆分為多個相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值甜害。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）舶掖。</blockquote>
<blockquote>5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明尔店。這意味著你可以找到每一行代碼具體完成了什么工作眨攘、為什么要寫這句代碼、瀏覽器之間的差異嚣州，并且你可以更容易地進(jìn)行自己的測試鲫售。</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)的盒模型寬高的計(jì)算方式秦效，可用來模擬那些非正確支持標(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若皱，這個屬性可以是寬高的計(jì)算方式變成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 虛擬機(jī)
虛擬機(jī)
