解決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);width: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{ width:300px; height:200px;}
img.ph{-ms-interpolation-mode:bicubic}
v\:image{behavior:url(#default#VML); display:block; width: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{ width:300px; height:200px;}
img.ph{-ms-interpolation-mode:bicubic}
v\:image{behavior:url(#default#VML); display:block; width: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下的第二幅圖。