输入(提交)元素在Firefox中占用额外的空间

Question

带有链接,输入(提交)和跨度的网页.所有的风格都具有相同的外观,实际上输入的样式与超链接和跨度具有相同的外观.

测试使用:Firefox 3.0,3.6,4.0,14.0.1

出于某种原因,其他人的投入略大.此外,输入的文本与链接和跨度的文本不对齐.这是一个现场演示.

http://jsfiddle.net/LGftW/

这是我的CSS:

a{
    text-decoration:none;
}

input[type="submit"]{
    border:0 none;
    background:transparent;
}

a, input[type="submit"], span{
    border:solid 1px green;
    font-size:64px;
    font-family:Arial;
    font-weight:bold;
    float:left;
    padding:0;
    margin:0;
}

标记:

<a href="#">LINK</a>
<input type="submit" value="INPUT" />
<span>SPAN</span>

那么如何使输入看起来像普通链接或跨度？浏览器的行为是否很奇怪,或者我只是错过了一些CSS？我现在已经解决了这一天了.

编辑

似乎问题只出现在Firefox中.IE8-9和Chrome正确显示它.

Answer 1

使用input::-moz-focus-innerCSS 在Firefox中删除按钮填充:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{
    border: 0;
    padding: 0;
}

已编辑:使用上述代码更新了演示链接.

在Firefox中看到演示