我有一个CSS，我已经使用了很多次，它结合了背景图像和背景颜色，到目前为止，我还没有遇到问题。然而，在这种情况下，我有一个奇怪的问题与移动浏览器，它缩小了1px的背景图像所有的方式，显示背景颜色的地方，我不想让它被看到!
CSS:.navlink {
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
height: 20px;
width: 200px;
margin: 0;
padding: 0;
float: left;
background-image: url(images/navarrowblank.gif);
background-position: top right;
background-repeat: no-repeat;
}
类应用于什么HTML元素并不重要。无论我使用的是iOS设备还是Android设备(但如果我在任何桌面浏览器中尝试相同的代码)，它都已经在所有明显的浏览器中检查过了!，我看不出有任何问题)。
我已经尝试过background-size和设置对象的边框为0 -这两个方法都不能解决这个问题。
图片本身是24px * 25px，但看起来是18px * 23px。
有什么建议吗，或者我应该咬紧牙关，把整个背景作为图像创建，然后失去背景颜色?
JSFiddle设置在这里:http://jsfiddle.net/frustratedwithdotnet/a64VP/2/(注意:红色边框被删除)
在这种情况下，您不能指定背景颜色和图像在同一级别。这个层次结构基本上是说图像优先于颜色。为了得到你想要的效果，你需要在div中包装元素，并使用你的背景色。
所以，你会看到这样的内容:
.wrap { background: #000; }
.nav-link { background: url(images/navarrowblank.gif) top left no-repeat; }
<div class="wrap"><div class="nav-link">Lorem Ipsum</div></div>
经过四天的折腾，没有任何解释为什么我在其他地方使用了几十次的代码会突然崩溃，我已经解决了这个问题，使背景图像与容器的宽度相同(而不是仅仅24px乘25px)，并填充黑色，而不是依赖背景颜色来做到这一点(留下右手端白色)。
不满意这个解决方案，但不考虑其他因素，这是我目前最好的解决方案。