Firefox忽略输入类型=“图像”的宽度和高度

Question

我创建了图像按钮。该按钮应在悬停时更改。我使用CSS设置图像，因此不需要在我的代码中使用src属性。 Chrome，Safari运行良好，但Firefox 48完全忽略了输入的大小。我尝试了CSS和HTML方式。这是一个错误吗？什么是正确的方法？

小提琴： https://jsfiddle.net/nyppzpqx/5/

这是firefox 48中的视图：

Answer 1

如果您将display: block添加到.btn-pay元素，它就可以了。它可能是自定义浏览器样式的东西。

正如Turnip所说，最好避免使用没有src属性的img元素。

Answer 2

您可以随时重新构建html的编写方式。这样您就不需要src属性了。大小被赋予外部div，然后按钮位于它的顶部，图像横跨整个div：

<div class="btn-pay">
   <input type="button" name="kind" value="test" class="btn-pay-input" >
</div>

然后更新样式：

.btn-pay {
  width:135px;
  height: 60px;
}
.btn-pay-input {
  background: url(http://placehold.it/135x60);
  color: transparent;
  transition: all 0.3s;
  width:100%;
  height:100%;
  text-align:center;
}
.btn-pay-input:hover {
  background: url(http://placehold.it/135x60/fff000);
}

以下是fiddle