html - 元素出海有自己的背景

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& 添加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;. 这有望解决您的问题。