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忽略輸入類型的寬度和高度=「圖像」

回答

相關問題