Firefox在帶邊框的按鈕中的圖像周圍增加了額外的空間

Question

我在<button>有一個<img> <button> 。 該按鈕帶有邊框。 圖像縮放到100％的高度，按鈕的寬度由計算出的圖像寬度確定。 到目前為止，只要按鈕上沒有邊框，它就可以正常工作。 如果添加邊框，Firefox將縮小圖像，但不會調整為新的圖像寬度。 它只會增加額外的空間。 Chrome和Safari可以按預期進行，或至少按我的預期進行。

如何使Firefox具有相同的行為？

數字

您可以看到我想要擺脫的多余綠色區域。

的HTML

<div class="wrapper">
    <button>
        <img src="//placehold.it/160x90">
    </button>
</div>

的CSS

.wrapper {
    height: 100px;
}

button {
    height: 100%;
    padding: 0;
    background: green;
    border: 0;
    border: 3px solid tomato;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button img {
    height: 100%;
    width: auto;
}

小提琴

https://jsfiddle.net/4tjmmq58/

Answer 1

這就是Firefox解釋div標簽以添加width div的方式，但是您可以將css更改為如下所示：

.wrapper {
    height: 100px;
    width: 170px;
}

button {
    height: 100%;
    padding: 0;
    background: green;
    border: 0;
    border: 3px solid tomato;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button img {
    height: 100%;
    width: auto;
}

這應該修復按鈕周圍的超大div。 但是我建議您在執行操作時使用不同的瀏覽器和<tags> 。

參考： http : //www.w3schools.com/cssref/pr_dim_width.asp

Answer 2

您只需要添加box-sizing: content-box; 按鈕，您的問題將得到解決，但還會出現另一個問題。 現在，您的邊框不會在元素的width / height進行計算，因此您可能需要手動將其減去。