将链接转换为图像“按钮”

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属性：

display:block;

Answer 2

正如minaz所指出的那样，display: block将解决这个问题。这些其他属性也会使<a>默认为display: inline元素，以尊重text-indent属性：

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

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

  

此属性指定a中第一行文本的缩进   块容器。更确切地说，它指定了缩进   流入该区块第一个线框的第一个框。