Firefox在带边框的按钮中的图像周围增加了额外的空间

Question

I have an <img> in a <button> . The button has a border. The image is scaled to 100% height and the width of the button is determined by the calculated image width. So far so good, as it works as long as there's no border on the button. If I add a border, Firefox is going to downscale the image but not to adjust to the new image width. It will simply add extra space. Chrome and Safari are doing this as expected – or at least as I expect it.

How can I get Firefox to behave the same?

Figure

You can see the extra green area I'm trying to get rid of.

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

Fiddle

https://jsfiddle.net/4tjmmq58/

Answer 1

That is how Firefox interprets the div tag to add the width div but you can just change the css to be like the following:

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

and this should fix the over-sized div around the button. But I would recommend using different browsers and <tags> when doing what your doing.

reference: http://www.w3schools.com/cssref/pr_dim_width.asp

Answer 2

You just need to add box-sizing: content-box; to the button and your problem will be fixed but another will emerge. Now your border won't be calculated in the elements width / height so you may have to subtract it by manually.