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

Question

我有一个导航栏，其中的链接使用1px宽，无重复，右对齐的背景图片作为分隔线，但是由于某些原因，Chrome中的链接之一未显示背景图片-在这种情况下为“田径”和“保龄球”。

它在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图片落在舍入的错误一侧。 为了确保它呈现在元素的绘制背景内，您需要用calc(100% - 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宽，但它可能仍具有可变的宽度。