雪碧圖技術

1、boder在某些狀況下會觸發BFC環境，通常用輪廓（outline）而不用邊框
2、雪碧圖技術（精靈圖）
是一種CSS圖像合併技術：（循環）；是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。
優勢：1）減小加載網頁圖片時對服務器的請求次數
能夠合併多數背景圖片和小圖標，方便在任何位置使用，這樣不一樣位置的請求只須要調用一個圖片，從而減小對服務器的請求次數，下降服務器壓力，同時提升了頁面的加載速度，節約服務器的流量。
2）提升頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於全部圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有本身的一個色表，這就增長了整體的大小。所以，單獨的一張 JPEG 或者 PNG sprite 在大小上很是可能比把一張圖分紅多張得來的圖片總尺寸小。
3）減小鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，因此，若是使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，因爲一張圖片便可，因此不會出現這種現象。

不足：1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印

3、解決兼容性
1）reset重置技術；normalize技術
2）加前綴
3）<!doctype>解析模式
4）CSS中的Hack技術
5）條件註釋
6）倒入包

4、瀏覽器兼容性
1）opacity(filter)
2)PNG背景
3）圓角（倒包，圖片）
4）BFC
5）雙倍margin兼容問題
6）在IE下有3PXz差距
7）font-size；

5、條件註釋必定要寫完整