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。