H5基础-11

---

一、css3处理兼容性问题方式（添加私有前缀）

前缀       浏览器内核     代表浏览器
-o-         presto       欧朋
-ms-        trident        IE
-moz-        gecko       火狐
-webkit-       webkit       谷歌、safari
          blink

二、图片整合技术/精灵图实现步骤

精灵图/雪碧图(sprites)：多张图组合实现的图片
实现步骤：
1.实现一个指定大小的盒子
2.将精灵图设置为该盒子的背景图
3.通过background-position调整位置

优缺点：
1.减少请求，提升性能。
2.减少文件数量，降低命名难度。
3.占用内存少。
4.步骤繁琐，增删图标麻烦

三、css中常见的bug及hack

1.图片的3px问题
解决：
A.给图片设置vertical-align:top丨middle丨bottom;
B.给图片设置display:block;
3.给图片加浮动(清除浮动带来的影响)

2.行内块元素水平方向之间会有间隔
A.给元素加浮动
B.去掉元素代码之间的空格和换行

3.图片被a包裹，在低版本浏览器会有边框
A.给图片设置border:none;

4.png-24格式的图片，在低版本浏览器显示为不透明
A.保存为png-8格式丨gif格式

5.表单元素垂直方向不能对齐
A.给元素添加浮动
B.给input设置vertical-align

6.margin的粘连和塌陷问题(见前文)

7.鼠标手型
cursor:hand;
cursor:pointer;