1

我正在尝试使用包含“奖项”（金，银，铜）的图像精灵来布置页面。它实际上是工作，保存在 Chrome 中的打印预览。在 Firefox/IE 中它看起来很好，但 Chrome 正在做的是背景图像正确启动（即背景位置有效），但图像的其余部分延伸到下一个元素的开头。请参阅此网址以获取屏幕截图。

这是 HTML 和相关 CSS 的片段：

<span class="price">$22.15
    <br />
    <span class="awards-section">
    <span class="award gold">S.O.E.I.W.F</span>
    <span class="award silver">F.L.I.W.C</span>
    <span class="award silver">A.C.W.C</span>
    <span class="award bronze">F.L.I.W.C</span>
    <br />
    </span>
</span>

.awards-section {
    margin-top: -0.3em;
    display: block;
    font-size: 4mm;
    font-weight: normal;
}
.award {
    background-image: url('/images/general/awards.png');
    width: 60px;
    height: 25px;
    display: inline-block;
    padding-left: 62px;
    margin: 1px;
    background-repeat: no-repeat;
    line-height: 25px;
    float: left;
    clear: both;
}
.gold { background-position: 0 0; }
.silver { background-position: 0 -25px; }
.bronze { background-position: 0 -50px; }
.double-gold { background-position: 0 -75px; }
.double-silver { background-position: 0 -100px; }
.double-bronze { background-position: 0 -125px; }
4

2 回答 2

1

上游错误已在 chrome 26 中解决。

https://code.google.com/p/chromium/issues/detail?id=131054

于 2013-03-16T15:21:12.443 回答
0

我也遇到过这个问题。我发现的唯一解决方法是切换到使用 img 标签裁剪器方法，而不是 background-image 方法。

方法显示在这里http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

我不知道 chrome 在做什么，但我认为它正在抓取背景图像尺寸并以该尺寸显示它们，但使用 div 尺寸裁剪图像。如果我是对的，这真的很奇怪。

于 2012-09-05T22:33:23.013 回答