仅在 Firefox 中截断图像背景

Question

我使用图像作为按钮，并且有一些 CSS 使背景看起来和表现得像一个按钮。这通常在所有浏览器以及我拥有的大多数页面上都能完美运行。仅在 Firefox 中的这个按钮上，图像被截掉了一半。

如何让它在 Firefox 中显示相同？

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

<-正确的观点，Chrome <- 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

仅在 Firefox 中截断图像背景

Image background cut off in Firefox only

html

css

firefox