android - CSS 背景颜色和图像冲突

Question

我有一段 CSS，我已经使用了很多次，它结合了背景图像和背景颜色，到目前为止，我没有遇到任何问题。但是，在这种情况下，我遇到了移动浏览器的一个奇怪问题，它一直将背景图像缩小 1 像素，在我不希望看到的地方显示背景颜色!

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 设备也无关紧要(但如果我在任何桌面浏览器中尝试相同的代码 [并且已经在所有明显的浏览器中进行了检查!]，我看不到任何问题完全没有)。

我已经尝试过设置背景大小并将对象的边框设置为 0 - 都没有解决问题。

图像本身为 24 像素 x 25 像素，但显示时似乎为 18 像素 x 23 像素。

有什么建议吗，还是我应该硬着头皮将整个背景创建为图像并去掉背景颜色？

JSFiddle 在这里设置:http://jsfiddle.net/frustratedwithdotnet/a64VP/2/ (注:去掉了红色边框)

Answer 1

在这种情况下，您不能在同一级别上指定背景颜色和图像。层次结构几乎表明图像优先于颜色。要获得您正在寻找的效果，您需要将元素包装在一个 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>

希望这对您有所帮助。