瀏覽器兼容方法
- 首先確定是否兼容
1.是否兼容IE
2.兼容到什么程度（A級（100%）：chrome，FF，IE 9+；B級：IE 8；C級：IE 7） - 如何兼容
1.cc（IE conditional comments 條件注釋）（IE 9以下的版本）
2.``````(lt：less than、gte：great than equal...)
3.property hacks（*）
4.browserhacks
如何調試IE瀏覽器
- 高版本可以使用控制臺
- 加邊框：border：1px solid；
- 加outline：outline：1px solid blue；
- 使用JS（地址欄輸入）：javascript：alert(document.get...)
什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 IE 7、IE 8的 hack 方式？
- CSS hack：利用瀏覽器的某些特性來實現特使的樣式
- 如何寫hack：
1.cc（IE conditional comments 條件注釋）（IE 9以下的版本）
``````(lt：less than、gte：great than equal...)
2.property hacks
例如 IE6能識別下劃線""和星號" "，IE7能識別星號" "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識
3.選擇器前綴法(即選擇器Hack)
例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{} - IE7、8中
[if (IE 7)|(IE 8)]
列舉幾種 瀏覽器兼容問題
- IE6，IE7不支持block元素設置為inline-block
解決辦法：讓塊元素設置為內聯對象呈遞（設置屬性display:inline），然后觸發塊元素的layout（如：zoom:1（觸發IE的BFC/haslayout） 或float屬性等）。
div {
display:inline-block;
*zoom:1;
*display:inline;}
- IE6不支持除了a標簽以外的hover
解決辦法：將需要加hover類的標簽改為a標簽
<a href="javascript:;">...</a> - IE 8 以下不兼容border-radius
- 每種瀏覽器默認邊距樣式都不一樣，一般會重置外邊距與內邊距為零
針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優雅降級是什么意思？
- 兼容多瀏覽器：考慮不同瀏覽器的市場份額，兼容主流的瀏覽器，對于市場份額太低的瀏覽器可以適當放棄
- 漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后在針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級：針對高版本瀏覽器進行頁面構建，然后再針對低版本瀏覽器進行兼容
reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css：在HTML標簽在瀏覽器里有默認的樣式，例如 p 標簽有上下邊距，strong標簽有字體加粗樣式，em標簽有字體傾斜樣式。不同瀏覽器的默認樣式之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。在切換頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式。“覆蓋”瀏覽器的CSS默認屬性
- Normalize.css 是一個可定制的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準;是在現代瀏覽器環境下對于CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。 這是一個現代的，HTML5-ready 的 CSS 重置樣式集
? Preserves useful defaults, unlike many CSS resets. - 保護有用的瀏覽器默認樣式而不是完全去掉它們? Normalizes styles for a wide range of elements. - 為大部分HTML元素提供一般化的樣式
? Corrects bugs and common browser inconsistencies. - 修復瀏覽器自身的bug并保證各瀏覽器的一致性
? Improves usability with subtle improvements. - 用一些小技巧優化CSS可用性
? Explains what code does using detailed comments. - 用注釋和詳細的文檔來解釋代碼
- 比較：
? 1. Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。 相比之下，Normalize.css保持了許多默認的瀏覽器樣式。 這就意味著你不用再為所有公共的排版元素重新設置樣式。 當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。
? 2. Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。 關于這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。
? 3. Normalize.css 不會讓你的調試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。
? 4. Normalize.css 是模塊化的
這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。
? 5. Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試。 這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。
IE盒模型和標準盒模型有什么區別? 怎樣使 IE7、8使用標準盒模型?box-sizing:border-box有什么作用
- 標準盒模型：width=content
- IE盒模型：width=content+padding+border
- IE使用標準盒模型：在HTML中設置聲明Doctype
- box-sizing：border-box；固定盒子大小；任何padding和邊框都在盒子內進行改變。計算方法為width=content+padding+border，表示指定的寬度和高度包含邊框、內邊距和內容區域。 即IE盒模型算法
操作題
-
windows xp虛擬機
ie7.PNG
ie8.PNG - 盒模型、inline-block、max-width的區別
-
嚴格模式下，IE7，IE8都使用標準盒模型，都支持max-width；IE8支持inline-block，IE7不支持inline-block
IE7
IE8 -
混亂模式下，IE7，IE8都使用IE盒模型，都不支持max-width，都不支持inline-block
IE7
IE8
本教程版權歸饑人谷和作者所有，轉載須說明來源。
