CSS Sprites原理（圖片整合技術）又稱為CSS精靈/雪碧圖

一、將導航背景圖片、按鈕背景圖片等有規則的合併成一張背景圖，即將多張圖片合為一張，用background-position實現背景圖片的定位技術。

二、優勢

1.通過圖片整合減少對伺服器的請求次數，提高頁面載入速度；

2.減少圖片體積

注：背景圖寫給li。

圖片整合原則

1.邊切圖邊整合；

2.定位時避免使用bottom、right等，用具體的數值，為了避免當寬度或高度擴充套件sprites圖時出現位置的錯誤；

3.將小圖示預留出足夠的空間，因為使用這些圖示元素通常會有大量的內容而且可能需擴充套件間距，以至於其他的圖片可能會意外出現在本區域內，一般情況下，會將這些小圖示整合到檔案的最右側；

4.單張整合好的sprite圖片在100kb以內；

5.按分類整合圖片。

瀏覽器相容

一、5大瀏覽器核心代表作品

1.Trident：又稱IE核心，只應用於Windows平臺，不開源；

2.Gecko：火狐瀏覽器，開源，跨平臺；

3.Webkit：Safari，chrome，開源；

4.Presto：opera，由Opera software開發，是世界上公認的渲染速度最快的引擎；

5.Blink：由Google、Opera software開發的排版引擎。

二、IE6中常見CSS bug

1.圖片間隙（出現在IE6及更低版本中）

描述：在元素中直接插入圖片時，圖片下方由3px的間隙。

hack1：將img轉為塊狀元素，給img新增宣告：display：block；

hack2：將img設定vertical-align:top/middle/bottom，只要不為baseline。

2.雙倍浮向（雙倍邊距）

描述：當IE6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。

hack：給浮動元素加宣告，display：inline；

3.預設高度（IE6）

描述：在IE6及以下版本中，部分塊元素擁有預設高度。（低於16px）

hack1：給元素新增宣告，font-size：0；

hack2：給元素新增宣告，overflow：hidden。

4.百分比bug

描述：在IE6及以下版本中，在解析百分比時，會按四捨五入方式計算從而導致50%加50%大於100%的情況。

hack：給右面的浮動元素新增宣告。clear：right，清除右浮動。

5.表單元素高度及對齊方式不一致（IE、Moz、c、o、s）

描述：表單元素行高對齊方式不一致。

hack：給表單元素新增宣告，float：left或者vertical-align：top。

注：1.表單元素中按鈕的解析是按怪異盒模型解析的。

        2.直接去掉表單控制元件的邊框時用border：0；或border：none不能相容IE7以下瀏覽器。

6.列表階梯bug（IE6及以下）

bug1：在給的子元素中使用了float：left，父元素沒有設浮動屬性，li呈階梯狀效果；

hack：給父元素設定浮動便能解決問題。

bug2：當給li裡的a轉成block元素，並設了固定高度，且給元素寫了浮動後在IE6及更低的版本瀏覽器裡會出現垂直顯示；

hack：給a也設定左浮動即可。

7.滑鼠指標bug

描述：cursor屬性的hand屬性值只有在IE瀏覽器識別，其他瀏覽器不識別該宣告，cursor屬性的pointer屬性值IE6以上版本及其他核心瀏覽器都識別該宣告。

hack：如統一某元素滑鼠指標形狀為手型，cursor：pointer。