本文探讨了在IE7浏览器中使用同一张图片作为小图和大图时出现的锯齿问题。尝试了多种解决方案，包括使用VML和-ms-interpolation-mode属性，但这些方法可能导致图片变形。最终决定为不同尺寸的图片分别存储。
项目中小图和大图使用了同一个图片，在IE8、firefox、chome中显示均没有问题，但在ie7中缩小显示的图有锯齿状，很伤人的一个问题。
尝试过 -ms-interpolation-mode: bicubic，没有解决问题，又尝试了
<head>
<title>VML</title>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
img{width:128px;height:128px;display:block;}
img.thumb{-ms-interpolation-mode: bicubic;}
</style>
</head>
<body>
VML:
<v:image src="http://www.iconpng.com/png/phuzion/home.png" style="width:128px;height:128px;display:block"/>
Old:
<img src="http://www.iconpng.com/png/phuzion/home.png" />
Bicubic:
<img src="http://www.iconpng.com/png/phuzion/home.png" class="thumb" />
</body>
</html>
这种方式可以解决问题，但是给网站带来了信息的问题，有些图片变形了，最终环视没有办法是用，看来是让大小图分别存储了。
这是当初设计经验的不足导致后面带来的问题，再次做个备份，防止再犯类似的错误。
<head>
<title>VML</title>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
img{width:128px;height:128px;display:block;}
img.thumb{-ms-interpolation-mode: bicubic;}
</style>
</head>
<body>
VML:
<v:image src="http://www.iconpng.com/png/phuzion/home.png" style="width:128px;height:128px;display:block"/>
Old:
<img src="http://www.iconpng.com/png/phuzion/home.png" />
Bicubic:
<img src="http://www.iconpng.com/png/phuzion/home.png" class="thumb" />
</body>
</html>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
