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

【问题标题】：Firefox adds extra space around image in button with borderFirefox 在带边框的按钮中的图像周围添加了额外的空间
【发布时间】：2016-03-02 20:39:34
【问题描述】：

我在<button> 中有一个<img>。该按钮有一个边框。图像被缩放到 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/

【问题讨论】：

有什么理由不使用<input type="image" src="/image.png" /> 而不是用按钮包裹图片？
@Aaron 我认为我在语义方面有所收获，因为按钮应该是可点击的 GUI 元素，而不是实际的输入元素或更具体的“图形提交按钮”。

标签： html css firefox button

【解决方案1】：

这就是 Firefox 解释 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

【讨论】：

这并不能解决问题，因为包装器实际上是多个元素的包装器，而不仅仅是单个按钮 - 这在 DOM 中将是矫枉过正的。 :) 按钮的宽度也取决于嵌入的图像。我不太明白你想用“但我建议在做你所做的事情时使用不同的浏览器和。”来表达什么。

【解决方案2】：

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

【讨论】：