在Firefox中调整大小时图像被切断了

Question

我目前正在一个网站上工作.如果在Firefox中查看,我注意到有些元素被切断了.我附上了一张图片,显示了问题.

下图是来自Firefox的jsfiddle截图.

重现它的代码位于:JSFIDDLE

它只是一个图像,具有使用CSS设置的percantage值.

.image-percent {
    width: 30%;
}

奇怪的是,有时我能够重现错误,有时它会在添加随机HTML元素或其他CSS属性后消失.

任何人都已经遇到这种行为或知道解决方法,迫使Firefox以正确的方式调整图像大小？

Answer 1

实际上在这个帖子中找到了Firefox,当通过外部CSS或内联样式进行缩放时,Firefox会模糊图像.

Firefox实现了非标准css属性image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

使用不同的值,此解决方案提供或多或少的适当结果:

image-rendering:optimizeQuality;

http://jsfiddle.net/jGKkB/