精灵图、兼容性

1.精灵图/雪碧图    sprites
       概念:由多张图组合成的一张图
       实现步骤:
            1.实现一个指定带下的盒子
            2.讲精灵图设置为该盒子的背景图
            3.通过background-position属性,设置背景图的起始位置
        优缺点:
            减少访问次数,提升性能
            占用内存小
            文件数量小，命名难度小
        缺点:增删图片麻烦，步骤繁琐

2.兼容性问题:
        同一个页面在不同的浏览器或版本看到的效果不一致。
        css Bug:css在不同浏览器中解析不一致
        css Hack: 针对特定的浏览器写特定的代码
        处理浏览器兼容性问题:  【添加私有前缀】
        代表浏览器            浏览器内核           前缀
        欧朋                  prest               -o-
        IE                   trident              -ms-
        火狐                  grcko               -moz-
        谷歌                  webkit              -webkit-
        谷歌和欧朋联发         blink
              写法:   -o-color:red;

3.常见兼容性问题:
        1.img的3px问题  {盒子不设置高度，盒子里放一张图片，盒子高度会比图片高3px左右}
           给img设置vertical-align:top 丨  bottom  丨  middle;
           或者给img设置display:block;
        2.行级或者行内块元素水平方向上会有间隔。
           给元素设置浮动
           或者给元素之间的空格和换行全部去掉
        3.表单元素垂直方向上对不齐。
           给元素设置浮动
           给眼神设置vertical-align:top;
        4.图片外面有超链接，在低版本浏览器中会有边框
           给图片设置边框为0
        5.图片如果是png24格式，在低版本浏览器中会显示成不透明效果
           将图片保存为png8格式
           (png格式会保留透明)