css hack
文檔模式ie7
文檔模式ie10
ie6
ie8
chrome
問題
一偿荷、如何調試 IE 瀏覽器灌侣？
- 使用高版本的ie控制臺查看盒模型
- 低版本ie使用border:1px solid
- 也可使用outline：1px solid(特點是不占空間推捐，不是每個版本都支持)
- 用
javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")加邊框
二、什么是CSS hack侧啼？在 CSS 和 HTML里如何寫 hack牛柒？在 CSS 中 IE 7、IE 8的 hack 方式痊乾？
- 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）皮壁，對CSS的支持、解析不一樣哪审，導致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果蛾魄。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式滴须，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程舌狗，叫做CSS hack!
- HTML里面：conditional comments cc:ie條件備注
<--[if IE]> 這段文字只在ie19及以下ie瀏覽器顯示（用的是文檔模式） <![endif]-->
我們也可以用
- gte:grater than equal
- lte:less than equal
- lt:less than
- gt:grater than
-
CSS里面：
Property（特性、屬性） hack
以display:inline-block為例
css hack
文檔模式ie7
文檔模式ie10
得到結論：inline-block在ie8及以上兼容扔水。
- 使用*zoom:1;
*display:inline;后ie全系列都顯示為并排排列痛侍。 - ie7 8的hack方式不為conditional comments或者property hack，我們可以使用時查詢得知查詢地址
三魔市、列舉幾種 瀏覽器兼容問題
- 盒模型：標準盒模型width=content area IE678則是IE盒模型：width=2*(border+padding+content area)
- 不同瀏覽器的標簽默認的外補丁和內補丁不同
- 塊屬性標簽float后主届，又有橫行的margin情況下，在IE6顯示margin比設置的大
參考
四待德、針對兼容君丁、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思将宪？
- 全局趨勢：現(xiàn)在的設計和開發(fā)的策略是瀏覽器分級支持绘闷。優(yōu)先為高端瀏覽器設計，同時考慮低端瀏覽器的退化方案较坛。甚至有些復雜的應用可以拒絕ie6簸喂，提示用戶使用高端瀏覽器。因此不要再考慮向后兼容燎潮，應該考慮向后退化，更多考慮向前兼容扼倘。
- 工作要求：看該網(wǎng)站用戶瀏覽器所占比例和公司要求确封，一般用戶瀏覽器占比3~5%以下就不考慮過多的樣式兼容，只要該頁面能在其瀏覽器下正常顯示其應有的框架功能即可再菊。
- 漸進增強：針對低版本瀏覽器（ie67）進行構建頁面爪喘，保證最基本的功能，然后再針對高級瀏覽器進行效果纠拔、交互等改進和追加功能達到更好的用戶體驗秉剑。
- 優(yōu)雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容稠诲。
五侦鹏、reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?'
reset.css通過為幾乎所有的元素施加默認樣式臀叙，強行使得元素有相同的視覺效果略水。
normalize.css相對「平和」，注重通用的方案劝萤，重置掉該重置的樣式渊涝，保留有用的 user agent 樣式.user agent(UA)它是一個特殊字符串頭，使得服務器能夠識別客戶使用的操作系統(tǒng)及版本、CPU類型跨释、瀏覽器及版本胸私、瀏覽器渲染引擎、瀏覽器語言鳖谈、瀏覽器插件等岁疼。
normalize.css優(yōu)點：
- 保護了有價值的默認值
- 修復了部分瀏覽器的bug
- 不會讓你的調試工具變的雜亂
- 是模塊化的
- 擁有詳細的文檔
六、IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE7蚯姆、8使用標準盒模型?box-sizing:border-box有什么作用五续？
- IE盒模型：width=2*(padding+border)+content
- 標準盒模型：width=content
在ie7、8添加<!doctype html>并且前面沒有加其他語句干擾到聲明文檔類型龄恋。 - 'box-sizing:border-box' 聲明了IE盒模型
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"> </div>
操作
ie6
ie8
chrome
問題
一疙驾、如何調試 IE 瀏覽器？
- 使用高版本的ie控制臺查看盒模型
- 低版本ie使用border:1px solid
- 也可使用outline：1px solid(特點是不占空間郭毕，不是每個版本都支持)
- 用
javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")加邊框
二它碎、什么是CSS hack？在 CSS 和 HTML里如何寫 hack显押？在 CSS 中 IE 7扳肛、IE 8的 hack 方式？
- 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）乘碑，對CSS的支持挖息、解析不一樣，導致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果兽肤。這時套腹，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式资铡，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程电禀，叫做CSS hack!
- HTML里面：conditional comments cc:ie條件備注
<--[if IE]> 這段文字只在ie19及以下ie瀏覽器顯示（用的是文檔模式） <![endif]-->
我們也可以用
- gte:grater than equal
- lte:less than equal
- lt:less than
- gt:grater than
-
CSS里面：
Property（特性、屬性） hack
以display:inline-block為例
css hack
文檔模式ie7
文檔模式ie10
得到結論：inline-block在ie8及以上兼容笤休。
- 使用*zoom:1;
*display:inline;后ie全系列都顯示為并排排列尖飞。 - ie7 8的hack方式不為conditional comments或者property hack，我們可以使用時查詢得知查詢地址
三店雅、列舉幾種 瀏覽器兼容問題
- 盒模型：標準盒模型width=content area IE678則是IE盒模型：width=2*(border+padding+content area)
- 不同瀏覽器的標簽默認的外補丁和內補丁不同
- 塊屬性標簽float后政基，又有橫行的margin情況下，在IE6顯示margin比設置的大
參考
四闹啦、針對兼容腋么、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思亥揖？
- 全局趨勢：現(xiàn)在的設計和開發(fā)的策略是瀏覽器分級支持珊擂。優(yōu)先為高端瀏覽器設計圣勒，同時考慮低端瀏覽器的退化方案。甚至有些復雜的應用可以拒絕ie6摧扇，提示用戶使用高端瀏覽器圣贸。因此不要再考慮向后兼容，應該考慮向后退化扛稽，更多考慮向前兼容吁峻。
- 工作要求：看該網(wǎng)站用戶瀏覽器所占比例和公司要求，一般用戶瀏覽器占比3~5%以下就不考慮過多的樣式兼容在张，只要該頁面能在其瀏覽器下正常顯示其應有的框架功能即可用含。
- 漸進增強：針對低版本瀏覽器（ie67）進行構建頁面，保證最基本的功能帮匾，然后再針對高級瀏覽器進行效果啄骇、交互等改進和追加功能達到更好的用戶體驗。
- 優(yōu)雅降級：一開始就構建完整的功能瘟斜，然后再針對低版本瀏覽器進行兼容缸夹。
五、reset.css和normalize.css分別是做什么的螺句？為什么推薦使用 nomalize.css?'
reset.css通過為幾乎所有的元素施加默認樣式虽惭，強行使得元素有相同的視覺效果。
normalize.css相對「平和」蛇尚，注重通用的方案芽唇，重置掉該重置的樣式，保留有用的 user agent 樣式.user agent(UA)它是一個特殊字符串頭取劫，使得服務器能夠識別客戶使用的操作系統(tǒng)及版本披摄、CPU類型、瀏覽器及版本勇凭、瀏覽器渲染引擎、瀏覽器語言义辕、瀏覽器插件等虾标。
normalize.css優(yōu)點：
- 保護了有價值的默認值
- 修復了部分瀏覽器的bug
- 不會讓你的調試工具變的雜亂
- 是模塊化的
- 擁有詳細的文檔
六、IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE7灌砖、8使用標準盒模型?box-sizing:border-box有什么作用璧函？
- IE盒模型：width=2*(padding+border)+content
- 標準盒模型：width=content
在ie7、8添加<!doctype html>并且前面沒有加其他語句干擾到聲明文檔類型基显。 - 'box-sizing:border-box' 聲明了IE盒模型
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"> </div>
操作
加doctype
ie6
ie8
chrome
不加doctype
ie6no doctype
ie8 no doctype
ie8怪異
no doctype width=content
doctype
ie8 no doctype
chromebox-sizing:border-box
ie8:有doctype
