元素出国了它自己的背景

Question

这是jsfiddle。

但由于某些原因 jsfiddle它工作正常，所以我在浏览器（Chrome）中截取了问题：

    .hider{
        height: 15px;
        vertical-align: -1px;
        margin-left: 0;
        margin-right: 0;
        display: inline-block;
        text-align: right;
        text-decoration: none;
        background-position: 0 0;
    }

链接示例：

 <a href="/tests/24/delete_key?position=10" class="hider" data-method="delete" data-remote="true" id="hide_10" rel="nofollow">x</a>

Answer 1

删除vertical-align＆amp;添加line-height。

还尝试使用速记CSS来最小化代码。

#hide_10 {               
 height: 15px;
 width: 54px;
 background-color: #ffc400;
 margin-bottom: 0 0 4px 0;
 display: inline-block;
 text-align: right;
 padding: 0;
 font-size: 12px;
 line-height: normal;
}

演示：jsFiddle

Answer 2

我建议您添加line-height:normal;。这有望解决您的问题。