按钮中的图像：奇怪的空间答案

【问题标题】：Image in Button: Strange space按钮中的图像：奇怪的空间
【发布时间】：2011-04-24 04:28:56
【问题描述】：

首先是 Firefox 4 Beta 8 中的结果：

显示的前一个元素是button 和img，后者是div 和img。正如您在前一种情况中看到的那样，img 的边界和button 的边界之间存在一些奇怪的空间。我想知道如何删除它。

这里是 CSS 文件：

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

【问题讨论】：

【解决方案1】：

在其他浏览器中测试上述测试用例表明这可能不是 CSS 问题，而是 Firefox 中的错误。经过一番研究，我发现了这个错误报告：Bug 140563 - <button> ignores CSS style padding:0

在那个错误报告中有一个问题的修复：

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

【讨论】：

【解决方案2】：

我认为您必须为div 设置width

【讨论】：

【解决方案3】：

您请求的padding 似乎没有被应用。您是否尝试在按钮上明确设置它？

【讨论】：