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

Question

嗨我似乎有一些问题，Firefox在提交按钮中添加了2个额外的填充像素。我已经在chrome和IE9中测试了这个并且两个浏览器都渲染了代码，Firefox似乎在底部添加了2个像素填充提交右上角有关键背景的按钮。这是网站：

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.I never可以解决这个问题。

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

Answer 1

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

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

此解决方案在此博客文章的评论中给出：

防弹CSS输入按钮高度

正如帖子所说：发生这种情况是因为Firefox（用户代理）拥有CSS样式使用!important并且任何试图覆盖CSS属性的东西都不会被应用。

Answer 2

**我把它留在这里，因为我觉得它很有用.. **

在任何一种情况下尝试只访问按钮并使用css来玩它：

input[type="submit"] {
  padding-bottom: 3px;
}

编辑

好的，因此您的解决方案存在问题，因为您将图像放在按钮上方会使实际单击提交按钮变得更加困难。 如果将鼠标悬停在键上，您将看到它没有变为指针=无法点击。

我建议您删除图片标记，然后将其用作提交按钮中的背景。 像这样的东西：

input[type="submit"] {
  padding-bottom: 3px;
  background: url(path-to-image);
  border: none;
  height: "img-height";
  width: "img-width";
}

如果图像的大小是正确的，那么因为你似乎确实在提交按钮中有某种背景。 我想制作一个包含背景和关键图像的正确尺寸的图像（我希望这最后一句话有所作为）。

另一个可能的问题可能是你的按钮中没有文本，但是按钮应该继承css中较早的lineheight / font-size，因此可能会更多地扩展提交按钮。 尝试添加像font-size：1px之类的东西。