解决IE下图片缩小失真（有锯齿）的问题
首先，这不是一个新鲜玩意儿，很多大牛08年就发现了。
其次，这是个所有IE下普遍都会遇到的问题，而非只针对于IE67。（百度了一下，大半左右的文章是针对于IE67的）。自己为什么不能试一下呢？为什么不能实事求是，实话实说呢？
先说一下：-ms-interpolation-mode:bicubic 为IE7私有属性。
interpolation
英 [ɪnˌtəpəʊˈleɪʃən]
美 [ɪnˌtɚpəˈleʃən]
n.
bicubic
双三次
再说一下：VML滤镜。
VML介绍
VML的全称是Vector Markup Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。
操作步骤
-
页面增加命名空间
-
增加CSS样式，如：
v:image{behavior:url(#default#VML);128px;height:128px;}
-
应用CSS样式的DOM，如：<v:image src="DSC_0535.JPG"/>
源代码参考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{ 300px; height:200px;}
img.ph{-ms-interpolation-mode:bicubic}
v:image{behavior:url(#default#VML); display:block; 300px; height:200px;}
</style>
</head>
<body>
<img src="DSC_0535.JPG" width="2144" height="1424" />
<img src="DSC_0535.JPG" width="2144" height="1424" class="ph" />
<v:image src="DSC_0535.JPG"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{ 300px; height:200px;}
img.ph{-ms-interpolation-mode:bicubic}
v:image{behavior:url(#default#VML); display:block; 300px; height:200px;}
</style>
</head>
<body>
<img src="DSC_0535.JPG" width="2144" height="1424" />
<img src="DSC_0535.JPG" width="2144" height="1424" class="ph" />
<v:image src="DSC_0535.JPG"/>
</body>
</html>
注意事项
-
使用v:image，所以需要xmlns:v="urn:schemas-microsoft-com:vml";
-
v:image必须指定display:block，否则图片不可见。
- v:image必须指定图片宽高，否则图片不可见。
-
非IE浏览器不支持，图片不可见。
-
只对同网站的图片有效。对IE6动态跨域名的图片失真依然无效；
-
不支持getElementsByName以及getElementsByTagName获取dom,通过ID可以。
IE6，8，9：
IE7的比较明显：
可以看出，第一幅图完全有锯齿，第三幅图虽然没有，但是仿佛加上了“高斯模糊”效果。只有第二幅图既清晰又无锯齿。
至于火狐，opera将2144*1424的照片缩至900*600是看不出锯齿的，但如果缩至300*200仍然会有。chrome和safari则不存在这个问题，完全绝对清晰平滑。效果同IE7下的第二幅图。