把链接变成图片“按钮”

Question

我想删除链接中的文本，并将其替换为使用css的图像。

标记：

<a id="notifications" href="#">Notifications</a>

Css：

#notifications{
    background: url('http://icons.iconarchive.com/icons/treetog/i/16/Floppy-Small-icon.png') no-repeat;
    height: 16px;
    width: 16px;
    text-indent: -9999px;
    overflow: hidden;
  }

JsFiddle。

我尝试了所有的东西，但似乎不能摆脱文本。这是不是用css做不到的？

Answer 1

正如米纳兹指出的那样，display: block将解决这个问题。这些其他属性也会让您的<a> (默认情况下是一个display: inline元素)遵守text-indent属性：

float: left|right;
position: absolute;
display: inline-block;

text-indent上的W3规范解释了原因：

此属性指定块容器中第一行文本的缩进。更准确地说，它指定进入块的第一行框的第一个框的缩进。

Answer 2

您需要添加显示属性：

display:block;