Question

我习惯使用padding + background-image在链接旁边放置一个图标。

这种方法有很多例子。这是here中的一个：

 <a class="external" href="http://www.othersite.com/">link</a>

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }

但是大多数浏览器都不打印背景图片，这很烦人。

什么是标准，用于在链接旁边放置图标，这些图标在语义上是正确的并适用于所有情况？

修改

CSS :before和:after怎么样？这是推荐的做法吗？

a.test:after {
    padding-right: 5px;
    content: url(../pix/logo_ppk.gif);
}

Answer 1

我亲自填充它并通过CSS类放置背景图像（就像你的例子）。它是迄今为止最轻的路线，它使文档保持轻量和语义。

如果打印它们真的很重要（我的意思是非常重要）在那里粘贴一个真实的图像，但要注意它确实从语义方面搞砸了标记。

也许一个更好的折衷解决方案是拥有一个“可打印版本”，它使用图像（通过服务器大小或某些JS用实际图像替换CSS类。）

Answer 2

虽然OLi说在CSS中保持图标是最好的方法，并且没有办法打印CSS背景。（直到您从浏览器设置打开css后台打印）。

但如果您可以使用javascript，那么此方法将适用于您

http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

您可以添加内嵌图片进行链接。

使用CSS向链接添加图标的标准方法是什么？

2 个答案: