雪碧图技术

1、boder在某些状况下会触发BFC环境，通常用轮廓（outline）而不用边框
2、雪碧图技术（精灵图）
是一种CSS图像合并技术：（循环）；是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分。
优势：1）减小加载网页图片时对服务器的请求次数
能够合并多数背景图片和小图标，方便在任何位置使用，这样不一样位置的请求只须要调用一个图片，从而减小对服务器的请求次数，下降服务器压力，同时提升了页面的加载速度，节约服务器的流量。
2）提升页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于全部图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有本身的一个色表，这就增长了整体的大小。所以，单独的一张 JPEG 或者 PNG sprite 在大小上很是可能比把一张图分红多张得来的图片总尺寸小。
3）减小鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，因此，若是使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，因为一张图片便可，因此不会出现这种现象。

不足：1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

3、解决兼容性
1）reset重置技术；normalize技术
2）加前缀
3）<!doctype>解析模式
4）CSS中的Hack技术
5）条件注释
6）倒入包

4、浏览器兼容性
1）opacity(filter)
2)PNG背景
3）圆角（倒包，图片）
4）BFC
5）双倍margin兼容问题
6）在IE下有3PXz差距
7）font-size；

5、条件注释必定要写完整