html - 使用 css(跨浏览器)在按钮上正确显示图像

Question

我正在尝试设计一个按钮的样式，以便它上面有一个图像:

我的 html:

<button type="button" class="btn"> 
<span></span>
</button>

我的CSS:

.btn
{
    margin-right: 3px;
    cursor: pointer;
    width: 27px;
    height: 27px;
    padding: 0;
}

.btn span
{
    margin: 0;
    padding: 0;
    vertical-align: middle;    
    width: 16px; 
    height: 18px; 
    background-image: url(updown.png);    
    background-position: -1px -3px;
    display: inline-block;
    overflow: hidden;
}

有了这个 css，它在 mozilla 中看起来居中，但在 chrome 中高一点，在 IE 中左上角多一点，有人知道如何正确地做到这一点，以便它在所有浏览器中看起来都一样吗？

Answer 1

尝试给按钮一个相对位置，而给跨度一个绝对位置？

(这将是一个评论，但我不能对事情发表评论。抱歉)