Firefox在邊框圖像中增加了額外的空間位置

我有一個<img>在<button>。該按鈕有一個邊框。圖像縮放至100％高度，按鈕寬度由計算圖像寬度決定。到目前爲止這麼好，只要按鈕上沒有邊框就可以工作。如果我添加邊框，Firefox會縮小圖像的大小，但不會調整爲新的圖像寬度。它只會增加額外的空間。 Chrome和Safari正在按預期做到這一點 - 或者至少如我所料。Firefox在邊框圖像中增加了額外的空間位置

我該如何讓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/

來源

2016-03-02 lampshade

爲什麼你不使用''而不是用按鈕包裝圖像？ – Aaron

@Aaron我認爲我獲得了語義，因爲按鈕應該是可點擊的GUI元素，而不是實際的輸入元素或更具體的「*圖形提交按鈕*」。 – lampshade

也就是說火狐如何解釋div標籤添加寬度的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

來源

2016-03-02 10:47:17 Panchi

這不會解決問題，因爲包裝實際上是多個元素的包裝，而不僅僅是一個按鈕 - 這將在DOM中矯枉過正。 :)此外，按鈕的寬度取決於嵌入式圖像。我不太明白，你想說什麼「*但是我會推薦使用不同的瀏覽器，並在做你自己的事情時使用。」*。 – lampshade

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

來源

2016-03-02 12:39:34 xpy

Firefox在邊框圖像中增加了額外的空間位置

回答

相關問題