Firefox在带边框的按钮中为图像添加了额外的空间

Question

我在$ npm ls -g --depth 0 /usr/local/lib ├── cordova@6.0.0 ├── ionic@2.0.0-beta.17 ├── ios-deploy@1.8.5 ├── ios-sim@5.0.6 ├── npm@2.14.12 └── typescript@1.8.2 中有一个<img>。按钮有边框。图像缩放到100％高度，按钮的宽度由计算的图像宽度决定。到目前为止一切都那么好，因为只要按钮上没有边框就行。如果我添加边框，Firefox会缩小图像的尺寸，但不会调整到新的图像宽度。它只会增加额外的空间。 Chrome和Safari正如预期的那样这样做 - 或者至少按照我的预期。

如何让Firefox的行为相同？

图

你可以看到我试图摆脱的额外绿色区域。

HTML

<button>

CSS

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

小提琴

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

您只需要在按钮上添加box-sizing: content-box;，您的问题就会得到解决，但会出现另一个问题。现在您的边框不会在元素width / height中计算出来，因此您可能需要手动减去它。