常用浏览器的CSS兼容问题.ppt

常用浏览器的CSS兼容问题 主讲:魏晓江 知识点 IE6的PNG图片兼容问题 CSS Sprite(背景定位) 网页布局中的图片格式对比 浏览器兼容的清除浮动办法 避免浏览器缓存已更新的资源文件 1.IE6的PNG图片兼容问题 问题描述: IE6下使用png-24/32的图片时透明部分会显示成灰色背景，其它浏览器正常 知识要点: png是一种图片编码格式，分为png-8和png-24两种,png-24有些软件也称为png-32 png-8:256(28)色的png,图片中只能包含256种颜色,在颜色表中定义，可包含一个透明色 png-24/32:全色png，可包含 28红色 X 28绿色 X 28蓝色 X 28透明 解决办法: 1.尽量避免使用全色PNG图片 2.针对ie6使用滤镜(参考) 3. 使用dd_belatedpng.js库(参考) 2.CSS Sprite 什么是CSS Sprite(百度百科) 把网页布局中用到的多图片合并成一张图片，并采用css的背景定位方法实现图片的各部分精确定位到需要使用的位置。 CSS Sprite优势 有效减少页面图片的请求数，减轻服务器压力 CSS Sprite实现动画 了解即可(谷哥动画说明) 案例参考 115网盘 笔秀网 sprite.png 实例分析 3.网页布局中常用的图片格式 格式 GIF PNG8 PNG24 JPG 大小对比 20PX以下尺寸最小 20PX以上尺寸最小 尺寸最大 尺寸比较小 透明区域 允许透明 允许透明 8位透明度 不允许透明 颜色对比 最多256种颜色 最多256种颜色 全色 全色 压缩损失 没超出256种颜色时无损失 没超出256种颜色时无损失 无损 有损 动画效果 可以有 无 无 无 其它特性 多种颜色偏移选项 交错 多种颜色偏移选项 交错 交错 可选品质 品质越低损失越大 计算机中使用的图片格式不仅这几种，但这几种是网页布局中最常用，兼容设备比较全面的图片格式 注意:使用photoshop保存图片时使用 导出web设备所用格式 并在元数据选项中选择无以避免在图片中存储额外信息，避免有些设备不能正确读取图片的问题 4.清除浮动的方法 资料参考: CS001: 清理浮动的几种方法以及对应规范说明 推荐方法: 采用一个HTML标签，以及css的clear属性，来手工清理浮动； Html代码 div class=“clearfloat”/div CSS代码 .clearfloat{clear:both;float:none;/*避免元素被浮动*/} 采用伪元素:after，配合可以设置 zoom:1 样式触发 IE6/7 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。 Html代码 div class=wraper div class=left浮动元素/div /div CSS代码 .wraper{zoom:1} .wraper:after{content:;display:block;clear:both} 5.避免浏览器缓存已更新的文件 问题说明: 为了避免网络延迟，提高网页渲染速度，一般浏览器都具的缓存功能，可以将资源文件(js,css,图片)等缓存到本地，再次使用时直接调用本地文件 这就导致部分资源文件如果后期出现更新，但浏览器没有下载新的资源文件，而是直接使用本地缓存的文件，从而出现很多问题 解决办法: 在引用文件时后面添加一个请求字符如:?v=1.0 在更新过文件后及时修改请求字符如:?v=1.1 这样浏览器去加载资源文件时就会知道文件的请求字符变了，就会去加载新的文件