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

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

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

这里是在Firefox 48中的观点：

来源

2016-09-14 user1201917

我没有看过规范，但我会想像src是图像输入所必需的。否则，你可能只是使用提交类型。 – Turnip

^没错。 ''所以不需要在我的代码中使用src属性''，但https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image表明“你必须使用src属性来定义图像的来源“ – henry

谢谢。我改变了输入类型以提交并删除了'border：none;'的默认样式。工作正常。 – user1201917

如果添加display: block到.btn-pay元素，它工作得很好。它可能是自定义浏览器样式的东西。

虽然和Turnip说的一样，但最好避免使用没有src属性的img元素。

来源

2016-09-14 18:26:41

你可以随时重构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

来源

2016-09-14 18:37:06

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

回答

相关问题