Question

我的问题最好用html代码解释：

<html><body>
noicon <a href="http://www.stackoverflow.com" style="padding-left:20px; background: url(http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png) no-repeat center left;"></a>
<br />
icon  <a href="http://www.stackoverflow.com" style="padding-left:20px; background:     url(http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png) no-repeat center left;"></a>
</body></html>

这是通过css添加图标的常用技巧。但是，当只有一个前面的空格时，图标不会在mac os x（chrome 9和safari 5）上的基于webkit的浏览器中显示。有没有人知道如何在<a>前面没有两个空格（???）的情况下显示链接背景图像？

Answer 1

在链接中放置零宽度空间..

<a href="http://www.stackoverflow.com" style="padding-left:20px; background: url(http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png) no-repeat center left;">&#8203</a>

基于webkit的浏览器上的css icon trick怪异行为

1 个答案: