随机1px背景图像未在Chrome中显示

Question

我有一个导航栏，里面有使用1px宽、无重复、右对齐的背景图像作为分隔符的链接，但由于某种原因，Chrome中的某个链接的背景图像没有出现——在这种情况下，是在"田径"one_answers"保龄球"之间。

它在Firefox和Explorer中工作，在Chrome中放大和缩小时，在更改字体大小时，在减少链接的字符长度时，等等。所以我相信这与Chrome如何渲染背景图像有关。

我尝试过不同的建议，比如将背景大小设置为包含/覆盖/100%，将图像渲染设置为像素化(据说这只针对常规图像，而不是背景图像(，但我无法实现。

如何确保所有背景图像在Chrome中正确显示？

CSS

ul {
display:flex;
list-style:none;
}
ul a {
background:url(sports-div.png) right bottom no-repeat;
display:inline-block;
font-family:sans-serif;
font-size:13px;
padding:5px;
}

HTML

<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice hockey</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Snooker</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Bowling</a></li>
<li><a href="#">Cycling</a></li>
</ul>

http://jsfiddle.net/zc29b8no/1/

Answer 1

技术解释相当冗长乏味。

但是，它的要点是：它与亚像素渲染有关。

锚点的尺寸不是清晰的像素，浏览器需要近似每个像素中要渲染的内容。您的1px图像位于舍入的错误一侧。为了确保它在元素的绘制背景内渲染，您需要将background-position中的right对齐(翻译为100%(替换为calc(100% - 1px):

ul {
	display:flex;
	list-style:none;
}
ul a {
	background:url(https://i.imgur.com/mCra304.png) calc(100% - 1px) bottom no-repeat;
	display:inline-block;
	font-family:sans-serif;
	font-size:13px;
	padding:5px;
}

<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice hockey</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Snooker</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Bowling</a></li>
<li><a href="#">Cycling</a></li>
</ul>

另一种解决方案是使图像2px变宽，但它可能仍然具有可变的宽度。