一伊磺、問答
如何調(diào)試 IE 瀏覽器
- IE7以上使用控制臺調(diào)試
- IE6用border或者outline來識別元素邊界調(diào)試
- 通過IE窗口執(zhí)行js調(diào)試
- 通過IEtester或其他測試軟件調(diào)試
- 通過安裝虛擬機智绸，直接在對應(yīng)IE版本來查看效果進行調(diào)試。
什么是CSS hack础废？在 CSS 和 HTML里如何寫 hack姑尺？在 CSS 中 IE 7厂抖、IE 8的 hack 方式灸眼？
由于不同的瀏覽器卧檐，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認(rèn)識不一樣焰宣，因此會導(dǎo)致生成的頁面效果不一樣霉囚，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS匕积，讓它能夠同時兼容不同的瀏覽器盈罐，能在不同的瀏覽器中也能得到我們想要的頁面效果榜跌。
這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack盅粪。-
CSS Hack有三種表現(xiàn)方式钓葫。
屬性前綴法（即類內(nèi)部hack）：例如IE6能識別下劃線“”和星號“”。IE7能識別星號“”但不能識別下劃線“”湾揽，IE6~IE10都認(rèn)識“\9”瓤逼，但firefox前述三個都不能認(rèn)識笼吟。
選擇器前綴法（即選擇器hack）：例如IE6能識別html .class{}库物，IE7能識別+html .class{}或者*:first-child+html .class{}
IE條件注釋法（即HTML條件注釋hack）：IE專有的hack方式（注：IE10+已經(jīng)不再支持條件注釋）。這類Hack不僅對CSS生效贷帮，對寫在判斷語句里面的所有代碼都會生效戚揭。
<pre><code>針對所有IE：
針對IE6及以下版本：
非IE瀏覽器：
針對IE6以及IE6以上版本：
</pre></code>
史上最全CSS hack
browserhacks
列舉幾種瀏覽器兼容問題
- inline-block不兼容ie6/7。
- 方法一：直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞（設(shè)置屬性 display:inline）撵枢，然后觸發(fā)塊元素的 layout（如：zoom:1 等）民晒。兼容各瀏覽器的代碼如下：* div {display:inline-block;**display:inline; *zoom:1;...}
- 方法二：先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline锄禽，讓塊元素呈遞為內(nèi)聯(lián)對象（兩個display 要先后放在兩個 CSS 樣式聲明中才有效果潜必，這是 IE 的一個經(jīng)典 bug ，如果先定義了 display:inline-block沃但，然后再將 display 設(shè)回 inline 或 block磁滚，layout 不會消失）。代碼如下：div {display:inline-block;...}div {*display:inline;}
針對兼容宵晚、多瀏覽器覆蓋有什么看法垂攘？漸進增強和優(yōu)雅降級是什么意思？
根據(jù)項目需求淤刃，當(dāng)客戶需要兼容低版本瀏覽器時晒他，那我們就需要針對這個需求去做兼容處理，一般低版本瀏覽器不可能兼容到顯示達到完美逸贾，我們只需要保證不影響正常功能使用和基本布局不亂就行了陨仅。在可以溝通的情況下可以盡量說服客戶放棄IE6/7
漸進增強：一開始只構(gòu)建站點的最少特性，然后不斷針對各瀏覽器追加功能铝侵。
優(yōu)雅降級：一開始就構(gòu)建站點的完整功能灼伤，然后針對瀏覽器測試和修復(fù)
reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css和normalize.css分別是做什么的哟沫？
reset.css：在HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式饺蔑，例如 p 標(biāo)簽有上下邊距，strong標(biāo)簽有字體加粗樣式嗜诀，em標(biāo)簽有字體傾斜樣式猾警。不同瀏覽器的默認(rèn)樣式之間也會有差別孔祸，例如ul默認(rèn)帶有縮進的樣式，在IE下发皿，它的縮進是通過margin實現(xiàn)的崔慧，而Firefox下，它的縮進是由padding實現(xiàn)的穴墅。在切換頁面的時候惶室，瀏覽器的默認(rèn)樣式往往會給我們帶來麻煩，影響開發(fā)效率玄货。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉皇钞，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式∷勺剑“覆蓋”瀏覽器的CSS默認(rèn)屬性夹界。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset隘世。
-
normalize.css：Normalize.css是一種CSS reset的替代方案可柿。
有下面這幾個目的：- 保護有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
-
解釋代碼：用注釋和詳細的文檔來
支持包括手機瀏覽器在內(nèi)的超多瀏覽器，同時對HTML5元素丙者、排版复斥、列表、嵌入的內(nèi)容械媒、表單和表格都進行了一般化目锭。盡管這個項目基于一般化的原則，但我們還是在合適的地方使用了更實用的默認(rèn)值滥沫。
- 為什么推薦使用 nomalize.css?
- Normalize.css 保護了有價值的默認(rèn)值
- Normalize.css 修復(fù)了瀏覽器的bug
- Normalize.css 不會讓你的調(diào)試工具變的雜亂
- Normalize.css 是模塊化的
- Normalize.css 擁有詳細的文檔
IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE7侣集、8使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
-
從下圖可以看到標(biāo)準(zhǔn) W3C 盒子模型的范圍包括 margin、border兰绣、padding世分、content，并且 content 部分不包含其他部分缀辩。
1.jpg
從下圖可以看到** IE 盒子模型**的范圍也包括 margin臭埋、border、padding臀玄、content瓢阴，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
2.jpg
參考 IE6健无、7荣恐、8添加文檔聲明（doctype）即可使用標(biāo)準(zhǔn)盒模型。
box-sizing:border-box;是CSS3新增屬性，了解這個屬性叠穆，我們先從塊級元素的盒子大小說起少漆。
通常一個標(biāo)準(zhǔn)盒模型下的塊級元素實際所占寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內(nèi)邊距（padding）+ 高度（height） / 寬度（width）；
如果設(shè)置了border-box硼被，實際所占寬高度 = 設(shè)置的高度（height）/ 設(shè)置的寬度（width）+ 外邊距（margin）示损。
這個屬性多用于排版問題，很多情況下很實用嚷硫，簡化了計算位置的問題检访。
二、 操作
因電腦配置問題仔掸，暫時沒有安裝虛擬機脆贵。
本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源嘉汰！
