css - Firefox 在提交按钮中添加 2px 填充

Question

您好，我似乎遇到了一些问题，Firefox 在提交按钮中添加了 2 个额外的像素填充。我已经在 chrome 和 IE9 中对此进行了测试，并且两种浏览器都可以正常显示代码，Firefox 似乎在提交按钮底部，右上角有关键背景。这是网站:

www.thanathos.host22.com

这是网站的代码:

 <form method="post" action="index.html">
               <input type="text" value="Username"/>
               <input type="text" value="Password"/>
               <input type="submit" id="submit" value=""/>
               <img src="img/header/key.png" alt="" id="key"/>
      </form>

    header section form input{
        color:#b3aaaa;
        border:1px solid #cccccc;
        float: left;
        padding:5px 8px;
        margin-left: 6px;
    }

我该如何纠正这个问题？

如果没有解决方案，谁能给我一个解决方案，输入文本与输入提交相等，输入文本从上到下居中？

编辑: 我已经在另一台计算机上检查过了，似乎 Firefox 正确地呈现了这个我之前遇到过这种类型的问题，相同的浏览器版本在不同的计算机上显示的网站有点不同。上次在 chrome 中发生了类似的事情。我一直无法解决这个问题。

有谁知道为什么同一个浏览器在具有相同屏幕尺寸和分辨率的不同计算机上呈现不同的页面？

Answer 1

我遇到了这样的问题。然后我发现这个 CSS 东西解决了这个问题:

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

这个解决方案是在这篇博文的评论中给出的:

Bulletproof CSS input button heights

正如帖子所说:发生这种情况是因为 Firefox(用户代理)自己的 CSS 样式使用 !important 并且任何人试图覆盖 CSS 属性不会被应用。