图像背景仅在Firefox中切断

Question

我使用图像作为按钮，并使用一些CSS来使背景看起来像一个按钮。这通常适用于所有浏览器，并且在我拥有的大多数页面上都能正常工作。仅在Firefox中的这一个按钮上，一半图像被切断。

1. 如何让它在Firefox中显示相同的内容？

http://jsfiddle.net/863ux696/在Chrome中查看此内容，然后在Firefox中查看我的意思。

＆lt;正确的观点，Chrome ＆lt; - 视图不正确，Firefox

CSS：

.login-button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/274x59);
    width: 274px;
    padding-left: 274px;
    height: 59px;
}

HTML

<img class="login-button" />

Answer 1

您可以将图片设为block或inline-block元素。

.login-button {
    display: inline-block;
}

演示http://jsfiddle.net/863ux696/1/

Answer 2

将<img>标记替换为<div>标记：

<div class="login-button"></div>

您正在使用<img>标记，但实际上您并未真正显示图像。我知道您可能选择了这个，因为您在后台有一个图像。

使用<img class="login-button" />有点异端，因为您没有src属性，这违反了<img>代码

的规范

Demo of the updated fiddle