css - 仅在某些计算机上的 Safari 浏览器中 Sprite 背景大小不正确

Question

我目前正在从事响应式 CSS 网页设计，并且有一些用于不同按钮状态的 Sprite 。

在这种情况下，我已经在 Firefox、Opera、IE(从 IE8 开始兼容)、Chrome 和 Safari 中测试了网页设计，一切都显示正确。网站在不同手机、平板、不同浏览器下测试无任何问题。

我正处于最后的测试阶段，让同事看看网站在不同分辨率下的外观......拥有 macbook pro 的 friend 是唯一遇到这个问题的人，而且只在 safari 下遇到，这使得它变得困难为我瞄准和解决。我尝试使用他的屏幕大小重现该问题，并将 safari 的模式切换为 mac 用户的模式，但没有成功。

代码如下:

.buttons-menu .btn .rules, .buttons-menu .btn .contact , .buttons-menu .btn .tickets , .buttons-menu .btn .profile {  display: block; width: 143px;height: 32.5px;padding-top: 37.5px; background-size: 100% 300%;}
.buttons-menu .btn .rules {background: url(../images/sprite-button-03.png); background-position: 0 -100%;}

问题是这个测试者看到了 sprite 第二部分的大约 2 个像素，而他不应该看到这个，而且这只在 safari 中。

感谢您阅读本文。

编辑:解决方案:正如 ralph.m 所想，问题出在 safari 中小数点的四舍五入，它的行为并不总是与其他浏览器中的相同。

Answer 1

避免使用像 .5px 这样的值。浏览器必须将其向上或向下舍入为一个整数，而你不知道它会采用哪种方式。