0

我有一个带有以下 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 中它是正确的？

4

3 回答 3

0

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

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

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

于 2013-08-19T11:03:21.547 回答
0

尝试这个，

      .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 默认添加的填充使其不适合您。

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

于 2013-08-19T11:35:54.653 回答
0

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

于 2013-08-19T11:01:55.787 回答