这个问题已经有一个答案在这里:

像所有权利-思想的人,我讨厌点击的链接,发现时已晚,它导致浏览器的严重PDF或Microsoft Office的文件。我想让生活更容易一点为人们通过显示一点点的图标下的链接,导致这样的文件。与IE8最后的支撑 :after 伪件,我认为CSS宣言将是相当简单:

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

在IE8,这一工作正常。在火狐和铬,虽然, text-decoration: none 被忽略,与强调的绵延不在底部的图标。有一种方法来解决这个问题没有"欺骗"通过使用一个额外的 <span> 标签?

有帮助吗?

解决方案

我这样做以不同的方式,使用 属性的选择, 背景图像和一个填充(如 xandy也建议):

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

这一工作在IE7。

这里是一个完整的例子

在IE7PDF图标不是可见的,因为它不明白数据的Uri:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

其他提示

关于如何使用的背景图像?

a.file_pdf {
    background: url('/images/pdf.png') no-repeat right;
    padding-right: 30px;
    ...
}

编辑

测试和运行完全可以在我FF3.5,应该没有问题,在大多数浏览器由于只使用传统的图像的替代技术。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top