我正在把这头发拉出来.
我们刚刚开始对我们的网站进行大修.作为最后一步,我们试图将所有字形和图标包装成精灵.它们都是透明的.png所以精灵也是如此.似乎如果背景来自一个妓女,IE会扭曲它.如果它来自原始文件,则不会. FF和Chrome无论如何都很好.
我正在查看orignal图像和sprited版本与网格并排查看像素是相同的.我已多次计算精灵中的像素,以确保我使用正确的坐标.我的CSS看起来像这样：
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */ background: url(lozRedRedSpacer.png) no-repeat;
‘XX’让我来回切换.使用单文件版本,它看起来很完美：.精灵版看起来像这样：.看起来它在垂直和水平方向都“压扁”.这不会发生在FF或Chrome中.
有任何想法吗？
编辑我能够消除大部分噪音并发布一个示例here.我在示例中添加了注释来描述我的问题.
非常感谢你花时间看看这个！
更新我们已经用CSS伪类替换了这些“重叠的分割器图像”,它们确实重叠并且缩放问题似乎已经消失.当然现在我们遇到了新的问题 – IE8错误地导致了z-order,IE7根本不理解伪元素.但至少标记更简单,缩放问题就消失了.
解决方法
事实证明我的问题是由IE的“缩放”功能引起的.没有任何缩放,一切看起来都像其他浏览器一样.即使150％或200％看起来也不错.但125％,我所拥有的,导致这种扭曲.它发生在IE7和IE8中.
