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。