HTML常见bug的hack以及图片整合介绍

（前端面试常见问题）

 

1.图片间隙
    div中的图片间隙
    bug：在块元素中插入图片时，有时图片会将块元素下方撑大三个像素。
    hack：给<img>添加声明：display：block；vertical-align：middle

2.css兼容问题
1）表单元素行高不一致（IE,MOZ,C,O,S）
   BUG:表单元素行高对齐方式不一致
   hack：给表单元素添加声明：float：left
2）按钮元素默认大小及样式不一致
    hack1：统一大小及样式/(用a标记模拟)
hack3：如果这个歌按钮式一个图片，直接把图片设置作为按钮的背景图即可。
3.鼠标指针
cursor:pointer

4.父元素里有块元素，如果给子元素添加margin-top，父元素会下来。
hack1：给父元素添加overflow：hidden；
hack2：给子元素添加float；
hack3：给父元素加边框；
（其它方法：达到我们想要的效果：如给父元素加padding-top）

 

图片整合

    用background-position来实现背景图片的定位技术，这种技术可以成为css sprites技术，又称为css精灵。
    将导航背景图片，按钮、背景小图标等小图片有规则的合并成一张背景图，即将多张图片合为一张整图，再利用background属性进行背景定位，用数字精确定位出背景图

片在布局盒子中的位置；
1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
2）通过整合图片来减小图片的体积。