IE7下图片缩小失真的解决办法
作者：idd.chiang 发布时间：February 24, 2010 分类：HTML/CSS,前端观察
一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图，美女脸上起了毛刺：
别着急，强大的MS有解决方案，微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property
img {
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */
}
Firefox在3.6版本新增了一个css属性：image-rendering，他的用途更加广泛，用于：
- * images
- * background-images of any element
- * HTML5 <video> Element
- * HTML5 <canvas> Element
image-rendering用法：
img {
image-rendering: optimizeQuality; /* Firefox 3.6 */
}
详细介绍：image-rendering
对比一下各浏览器对图片失真处理方法：
| 浏览器 | 版本号 | 提供CSS属性 |
|---|---|---|
| Internet Explorer | 7.0 | -ms-interpolation-mode: bicubic | nearest-neighbor仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性 |
| Firefox (Gecko) | 3.6 (1.9.2) | image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges |
| Opera | --- | --- |
| Safari (WebKit) | --- | --- |
更多的测试可以到可以到MSDN 做的例子看一下效果，或者到血 統の森-web実験小屋看一下效果。
