html - 基于 webkit 的浏览器上的 css 图标技巧奇怪的行为

标签 html css webkit background-image

我的问题最好用 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> 前面不带两个空格 (???) 的情况下显示链接背景图像? ?

最佳答案

在链接内放置一个零宽度的空格..

<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>

关于html - 基于 webkit 的浏览器上的 css 图标技巧奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8828420/

相关文章:

html - 容器漂浮问题

html - 在 CSS 中指定颜色的最佳方式是什么?

html - 试图让导航栏与网站标题在同一行

html - Chrome & Edge 和 Firefox 中的 ng-repeat 和按钮间距

css - iOS7 Safari 更改 webkit-overflow-scrolling 背景颜色

Javascript:如何不断监控变量值

html - 在不使用表格的情况下在 Bootstrap 4 中制作一行以具有悬停效果

html - Css 来回旋转元素 360

javascript - 使用 Javascript AngularJS 逐一单击后在框中显示元素

css - 动画大图像在 Safari 上无法正常工作