图像按钮：奇怪的空间 [英] Image in Button: Strange space

问题描述

首先，导致火狐4测试版8：

显示前者元素是按钮与 IMG 后者是 DIV 与 IMG 。正如你可以在前者的情况下看还有就是 IMG 和按钮的边框。我不知道如何可以将其删除。

下面的CSS文件：

  * {
    保证金：0;
    填充：0;
}按钮，IMG的div {
    边框：1px的纯黑色;
}IMG {
    显示：块;
}
 




解决方案

在测试其他浏览器上面的测试用例已经表明，这可能不是一个CSS问题，但在Firefox中的错误。研究一点点后，我发现这个bug报告：错误140563 - ＆LT;按钮和GT; 忽略的CSS样式填充：0

在该bug报告有针对该问题的修复：

 按钮::  -  MOZ对焦，内填充{0;边框：0}
 

First the result in Firefox 4 Beta 8:

The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.

Here the CSS file:

* {
    margin: 0;
    padding: 0;
}

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

img {
    display: block;
}

解决方案

Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0

In that bug report there is a fix for the problem:

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

这篇关于图像按钮：奇怪的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！