ie兼容图片缩小后模糊失真（锯齿）问题

解决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提供支持。

 

操作步骤

1. 页面增加命名空间

2. 增加CSS样式，如：

   v\:image{behavior:url(#default#VML);width:128px;height:128px;}

3. 应用CSS样式的DOM，如：

源代码参考

注意事项

• 使用v:image，所以需要xmlns:v="urn:schemas-microsoft-com:vml";

• v:image必须指定display:block，否则图片不可见。

• v\:image必须指定图片宽高，否则图片不可见。

• 非IE浏览器不支持，图片不可见。

• 只对同网站的图片有效。对IE6动态跨域名的图片失真依然无效；

• 不支持getElementsByName以及getElementsByTagName获取dom,通过ID可以。

效果截图：第一幅图为默认样式，第二幅为添加了-ms-interpolation-mode:bicubic，第三幅图为运用了：

IE6，8，9：


IE7的比较明显：


可以看出，第一幅图完全有锯齿，第三幅图虽然没有，但是仿佛加上了“ 高斯模糊”效果。只有第二幅图既清晰又无锯齿。

至于火狐，opera将2144*1424的照片缩至900*600是看不出锯齿的，但如果缩至300*200仍然会有。chrome和safari则不存在这个问题，完全绝对清晰平滑。效果同IE7下的第二幅图。

 

转载于:https://www.cnblogs.com/zhouyx/p/4189069.html