Firefox忽略输入type =“ image”上的宽度和高度

Question

I create the image button. The button should change on hover. I set the image with CSS, so there is no need to use src attribute in my code. Chrome, Safari works well, but Firefox 48 completely ignores sizes of the input. I tried both CSS and HTML way. Is it a bug? What is the correct way?

Fiddle: https://jsfiddle.net/nyppzpqx/5/

Here is the view in firefox 48:

Answer 1

If you add display: block to the .btn-pay element, it works just fine. It may be something with custom browser styles.

Altough as Turnip said, it is better to avoid using img element without src attribute.

Answer 2

You can always restructure the way the html is written. This way you do not need the src attribute. The size is given to the outer div, and then the button is positioned on top of it with an image that spans the entire div:

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

and then update the styling:

.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);
}

Here is the fiddle