1. 什么是 CSS hack
Hack是針對不同瀏覽器去寫不同的CSS樣式，從而讓各瀏覽器能達到一致的渲染效果，那么針對不同的瀏覽器寫不同的CSS CODE的過程就叫做CSS Hack。然后將Hack放在瀏覽器特定的CSS文件中，讓符合條件的瀏覽器去解析這些代碼，符合條件的就解析，不符合的就不解析，從而達到所需要的頁面渲染效果。總的一句話來說就是使用CSS Hack將會使你的CSS代碼部分失去作用，然后借助條件樣式，使用其原CSS代碼在一些瀏覽器解析，而CSS Hack代碼在符合條件要求的瀏覽器中替代原CSS那部分代碼。
2.談一談瀏覽器兼容的思路
主要從三個方面去考慮：
- 要不要去做？
主要從產品的角度和成本的角度去考慮；產品的角度來說我們要考慮清楚產品的使用群體，以及受眾的瀏覽器比例，從中分析我們需要效果優先還是功能優先。從成本的角度分析，就是我們做某個功能值不值得，有沒有必要，付出和收獲是否不成比例。 - 如果做，做到什么程度？
具體到需要讓那些瀏覽器支持哪些效果，在不同的瀏覽器側重點也不同。
例如：漸進增強和優雅處理。
漸進增強是指針對低版本瀏覽器進行頁面構建，保證最基本的功能，在這基礎上補充一些高級瀏覽器的效果，功能，交互；
優雅降級：針對高級瀏覽器，構建完整的功能，再針對低版本的瀏覽器去做一些兼容。 - 如何去做？
根據兼容的需求選擇不同的技術或框架（比如jQuery） - Bootstrap;
- jQuery 1.~(>=ie6),jQuery 2.~(>=ie9);
- Vue(>=ie9);
- ....
根據兼容需求選擇兼容工具(html5shiv.js , respond.js , css.reset , normalize.css , Modernizr)
postCSS
條件注釋 CSS Hack js能力檢測做一些修補。
3.列舉5種以上瀏覽器兼容的寫法
條件注釋：
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
| 項目 | 范例 | 說明 |
| :------: | :------: |
| ! | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE 5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| 或| [if (IE 6)或(IE 7)] | IE6或者IE7 |
CSS Hack:
CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
常見的Hack寫法：
.box{
//屬性前綴法
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
//選擇器前綴法
.ie7 .clearfix{
zoom: 1;
}
//IE條件注釋法
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
屬性兼容問題：
常見的屬性兼容情況如下：
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
常見處理范例如下：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
4.以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。（IE10不再支持條件注釋）。 - IE Hack
專門準對IE瀏覽器不同版本間的兼容性問題的處理，使之能夠渲染出想要的效果。 - js 能力檢測
是指js中兼容性問題的一些封裝。通過js封裝函數或對象來解決瀏覽器的兼容問題。 - html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。利用腳本document.createElement(“”)創建對應的腳本，CSS選擇器便可正確應用到該標簽。 - respond.js
Respond.js 是一個快速、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。（Responsive Web Design） - css reset
HTML標簽在瀏覽器中都有默認的樣式，例如p標簽有上下邊距，strong標簽有字體加粗樣式等。不同瀏覽器的默認樣式之間存在差別，例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現的，而在Firefox下卻是由padding實現的。開發時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容問題，影響開發效率。解決方法其中之一是開始就將瀏覽器的默認樣式全部覆蓋掉，這就是CSS reset。 - normalize.css
Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。- 它可以保留有用的默認值，不同于許多 CSS 的重置
- 標準化的樣式，適用范圍廣的元素。
- 糾正錯誤和常見的瀏覽器的不一致性。
- 一些細微的改進，提高了易用性。
- 使用詳細的注釋來解釋代碼。
- Modernizr
Modernizr是一個檢測用戶瀏覽器HTML5和CSS3能力的JavaScript庫。Modernizr在頁面加載時快速運行來檢測功能；之后它會創建一個保存檢測結果的JavaScript對象，然后為你頁面中的html標簽上添加一系列class屬性來接通你的CSS。
Modernizr支持大量的測試和可選地包括YepNope.js來視情況加載外部的js和css資源。 - postCSS
PostCSS 是使用 JS 插件來轉換 CSS 的工具，支持變量，混入，未來 CSS 語法，內聯圖像等等。PostCSS是CSS變成JavaScript的數據，使它變成可操作。PostCSS是基于JavaScript插件，然后執行代碼操作。PostCSS自身并不會改變CSS，它只是一種插件，為執行任何的轉變鋪平道路。
