CSS背景颜色和图像冲突

Question

I have a piece of CSS that I've used a number of times that combines a background image and a background colour and, to this point, I've not had a problem with it. However, in this instance, I've got a weird issue with mobile browsers where it's shrinking the background image by 1px all the way around, revealing the background colour where I don't want it to be seen!

The 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;
}

It doesn't matter what HTML element the class is applied to. It also doesn't matter if I'm using an iOS device or an Android device (but if I try the same code in any desktop browser [and it's been checked in all the obvious ones!], I don't see any issues at all).

I have already tried background-size and setting the object's border to 0 - neither of which resolved the issue.

The image itself is 24px by 25px but appears to be displaying at 18px by 23px.

Any suggestions, or should I just bite the bullet and create the whole background as an image and lose the background colour?

JSFiddle set up here: http://jsfiddle.net/frustratedwithdotnet/a64VP/2/ (note: red border removed)

Answer 1

In this case, you can not specify a background color and image on the same level. The hierarchy pretty much says that images take priority over colors. To get the effect you are looking for, you'll need to wrap the element in a div and style it with your background color.

So, you'll be looking at something like:

.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>

Hope this helps.

Answer 2

After four days of hair-tugging, and with no explanations available as to why code that I've used dozens of times in other places should suddenly go doolally, I've solved it by making the background image the full width of the container (instead of just 24px by 25px) and filling it black instead of relying on the background colour to do that (leaving the right hand end white).

Not happy with that solution, but absent anything else it's the best I've got for now.