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 中发生了类似的事情。我永远无法解决这个问题。

谁知道为什么相同的浏览器会在不同的电脑上以相同的屏幕尺寸和分辨率呈现不同的页面？

Answer 1

** 我把它留在这里，因为我认为它很有用哦..**

在任何一种情况下，尝试只访问按钮并使用 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 之类的东西。

Answer 2

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

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

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

Bulletproof CSS input button heights

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