FF中的按钮对齐不正确？

Question

我在CSS下面有一个html按钮。

.myButton{
    background: url("../images/button.png") no-repeat top left;
    height: 21px;
    width: 78px;
    text-align: center;
    color: #696969;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    border: medium none white;
}

它在IE中呈现得很好。但是在Fire Fox中它不会将文本呈现在中心。它呈现如下：

如何将文本与FF中心对齐。在IE中这是正确的吗？

Answer 1

我将background: url("../images/button.png") no-repeat top left更改为后台：url("../images/button.png") no-repeat top center并且工作正常....

Answer 2

必须有适用于您的按钮的其他CSS代码。只有给定的CSS按钮看起来不同：http://jsfiddle.net/xQmHA/

<button class="myButton">TEST</button>

您可以在Firefox中检查哪些样式规则适用于您的按钮（F12 - ＆gt; CSS - ＆gt;选择您的按钮）

Answer 3

试试这个，

      .myButton{
            padding:0;
            background: url("../images/button.png") no-repeat top left;
            height: 21px;
            line-height: 21px;
            width: 78px;
            text-align: center;
            color: #696969;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 11px;
            border: medium none white;
            outline:0 none;
    }

在添加样式之前，您需要重置任何浏览器的默认样式表。在这种情况下，我怀疑它是FF / IE默认添加的填充，这使得它不适合你。

在添加自己的元素之前，请找到适当的元素重置样式。