简体繁体 English

background-image和repeat-x在Mac OS，Firefox 14.0.1上导致图像变形

[英]background-image and repeat-x causes image deformation on Mac OS, Firefox 14.0.1

原文 2012-08-30 16:09:54 3 1 html/ css/ macos/ firefox

I trying to set background image (pattern) to div and I have a deformation of pattern, that changes while I resize the browser. 我试图将背景图像（图案）设置为div，但图案发生变形，在调整浏览器大小时会发生变化。

HTML & CSS: http://vulntest.16mb.com/ HTML和CSS： http ： //vulntest.16mb.com/
Screenshot: https://img.skitch.com/20120830-me47twteijh35i3k2nbkbbadnc.jpg 截图： https ： //img.skitch.com/20120830-me47twteijh35i3k2nbkbbadnc.jpg

When I remove repeat-x and set width of the div to pattern width (8px) the image looks ok - img.skitch.com/20120830-m69s2a7x4d3fdxjmsjjs8f58f6.jpg (sorry, can't post more than 2 hyperlinks). 当我删除repeat-x并将div的宽度设置为图案宽度（8px）时，图像看起来正常-img.skitch.com/20120830-m69s2a7x4d3fdxjmsjjs8f58f6.jpg（抱歉，不能发布两个以上的超链接）。 I also tested this code on Windows 7 in IE9, Chrome 21, Firefox 13 and Opera 12.01 and div with repeat-x looks ok. 我还在IE9，Chrome 21，Firefox 13和Opera 12.01和div带有repeat-x的div上的Windows 7上测试了此代码。

So my questions are: 所以我的问题是：

is that a bug of the browser ? 那是浏览器的错误吗？
how I can workaround this issue ? 如何解决此问题？

Thanks a lot. 非常感谢。 Regards. 问候。

1 个解决方案

It's totally OK. 完全可以 If you remove the background-repeat: repeat-x; 如果删除background-repeat: repeat-x; then it repeat on both the X and Y axes. 然后在X和Y轴上重复。 Because you gave it a height it can't show you repeat Y. Just remove the repeat-x; 因为你给它的高度就不能显示你重复Y.只需删除repeat-x; and give it a larger width. 并给它更大的宽度。 It will repeat on both axes. 它会在两个轴上重复。