問答
1. 如何調試 IE 瀏覽器
- IE7及以上版本
使用開發(fā)者工具調試波俄。 - IE6
使用border、JS配合控制臺調試。
2. 什么是CSS hack箱蟆？在 CSS 和 HTML里如何寫 hack默穴？在 CSS 中 IE 7怔檩、IE 8的 hack 方式？
CSS hack
是指為了兼容不同瀏覽器或者同種瀏覽器不同版本渲染成同樣效果的頁面而分別寫不同的CSS蓄诽。-
CSS和HTML里如何寫hack( CSS中IE7薛训、IE8的Hack方式)
CSS Hack大致有3中方式：- HTML頭部引用(if IE)Hack——條件注釋法
* 只在IE下生效 <!--[if IE]> 代碼 <![endif]--> * 只在IE6下生效 <!--[if IE 6]> 代碼 <![endif]--> * 只在IE6以上版本生效 <!--[if gte IE 6]> 代碼 <![endif]--> * 只在IE8上不生效 <!--[if ! IE 8]> 代碼 <![endif]--> * 非IE瀏覽器生效 <!--[if !IE]> 代碼 <![endif]-->- CSS樣式里寫——類內屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的Hack前綴，以達到預期的頁面展現效果仑氛。
IE瀏覽器各版本CSS Hack對照表：
IE Browser CSS Hack 對照表
注：S——標準模式乙埃，Q——怪異模式
在標準模式中：
"-"減號是IE6專有的hack
"\9"IE6/IE7/IE8/IE9/IE10都生效
"\0"IE8/IE9/IE10都生效，是IE8/9/10的hack
"\9\0"只對IE9/IE10生效锯岖，是IE9/10的hack- CSS選擇器前綴法
選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器介袜，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。最常見如下：
*html *前綴只對IE6生效 *+html *+前綴只對IE7生效 @media screen\9{...}只對IE6/7生效 @media \0screen {body { background: red; }}只對IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效 @media screen\0 {body { background: green; }} 只對IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 等等 -
在 CSS 中 IE 7出吹、IE 8的 hack 方式
- IE7 Hack
*遇伞、+、#捶牢、\9鸠珠，詳見IE Browser CSS Hack對照表 - IE8 Hack
\0、\9秋麸，詳見IE Browser CSS Hack對照表
- IE7 Hack
3. 列舉幾種 瀏覽器兼容問題
- IE6無法識別小于19px的小圖標渐排。
- 每種瀏覽器默認邊距樣式都不一樣，一般會重置外邊距與內邊距為零竹勉。
- IE6 7 8不兼容大部分CSS3屬性飞盆，如background-size。
4. 針對兼容次乓、多瀏覽器覆蓋有什么看法吓歇？漸進增強和優(yōu)雅降級是什么意思？
- 針對兼容票腰、多瀏覽器覆蓋有什么看法
- 原則：成本與收益城看。
- 根據瀏覽器市場占有率，兼容主流杏慰、淘汰末流测柠。
- 對于高級瀏覽器功能全開炼鞠，提供最好的用戶體驗。對于低級瀏覽器頁面展示效果可以降低標準轰胁，并建議提醒客戶轉至高級瀏覽器享受更好用戶體驗谒主。
- 漸進增強和優(yōu)雅降級
- 漸進增強（progressive enhancement）
先把網頁依低級瀏覽器實現最基本的功能，再根據需求一步一步的追加赃阀。是一種向前看的角度霎肯。 - 優(yōu)雅降級（graceful degratation）
先按照最高要求實現功能，再降級兼容低級瀏覽器榛斯。是一種往回看的角度观游。
- 漸進增強（progressive enhancement）
5. reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css和normalize.css分別是做什么的
- reset.css
不同瀏覽器自帶默認樣式驮俗，而且各有不同懂缕，所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式王凑√赂蹋“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉荤崇！這就是CSS reset拌屏。 - normalize.css
Normalize.css是一種CSS reset的替代方案潮针，它：- 保護有用的瀏覽器默認樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細的文檔來
- reset.css
- 為什么推薦使用 nomalize.css
- Normalize.css 保護了有價值的默認值
- Normalize.css 修復了瀏覽器的bug
- Normalize.css 不會讓你的調試工具變的雜亂
- Normalize.css 是模塊化的
- Normalize.css 擁有詳細的文檔
6. IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE7术荤、8使用標準盒模型?box-sizing:border-box有什么作用
- IE盒模型和標準盒模型有什么區(qū)別
在盒模型那個章節(jié)有詳細提到過，主要區(qū)別在于IE的寬高包括了內容寬高每篷、內邊距和邊框瓣戚，而標準盒模型寬度只是內容寬度。 - 怎樣使 IE7焦读、8使用標準盒模型
添加文檔聲明<!doctype html>子库。 - box-sizing:border-box有什么作用
設置盒子的寬高為內容寬高、內邊距矗晃、邊框之和仑嗅。
除了IE6、7张症，主流瀏覽器基本都兼容仓技。
操作
1. virtualbox 安裝 xp 虛擬機
虛擬機WIN XP
2. 在 IE 7、8 中展示 盒模型俗他、inline-block爆班、max-width的區(qū)別
IE7
IE8
參考
知乎: Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別
本文章著作權歸饑人谷_九霄和饑人谷所有箕慧，轉載須說明來源
