Question

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

它在Firefox和资源管理器中有效，在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图片落在四舍五入的错误一侧。为了确保它呈现在元素的绘制背景中，您需要将right中的background-position对齐方式（转换为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变宽，但它的宽度可能仍然可变。

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

1 个答案: