Firefox在提交按钮中添加了2像素的填充。

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发生类似的事情。我从来没有解决过这个问题。

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

- Nistor Alexandru

---

我的情况下没有填充。我正在使用Firefox 15！ :) - Praveen Kumar Purushothaman

我也使用Firefox 15，但不知何故在底部会多出两个像素的填充。 - Nistor Alexandru

兄弟，截个屏？使用 Firebug 窗口，展示布局？ - Praveen Kumar Purushothaman

你是否使用类似于normalize或reset.css的东西来使所有浏览器看起来相同？ - Skatox

Answer 1

我之前也遇到了这个问题，后来发现了这个 CSS 东西解决了这个问题：

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

这个解决方案是在这篇博客文章的评论中提供的：

Bulletproof CSS input button heights

正如文章所说：这是因为Firefox（用户代理）自己的CSS样式使用了!important，任何尝试覆盖该CSS属性的操作都不会被应用。

- Leniel Maccaferri

---

这个问题是关于Firefox特殊的提交按钮隐藏填充问题，需要解决。 - Chris Snyder

在2016年，仍需要在Firefox中修复它！附加组件：我发现在我的情况下，设置input { height: 100% }或只需input::-moz-focus-inner { border:0;}即可解决问题。 - Tan Jia Ming

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中较早的行高/字体大小继承，并因此可能扩展提交按钮更多。尝试添加类似于font-size：1px之类的内容。

- Daniel Figueroa

---

这不可能是因为图像的绝对定位。无论如何，我已经测试过了，但它没有起作用。 - Nistor Alexandru

另外，在你的情况下，将边框设置为：solid 1px #000，因为这是你现在使用的，对吧。 :) - Daniel Figueroa

我已经知道了关于那张位于顶部且无法点击的图片，它将在某个时候被修正，但问题与该图片无关。我可以向您保证，我已经将其删除，但问题仍然存在。 - Nistor Alexandru

如果您没有正确阅读我的问题，那么我的问题是在Firefox中底部会出现2px的填充，其他浏览器都能正确显示，只有Firefox会多出2个像素。在这种情况下，图像并不重要，我知道我必须修改代码，并且在某个时候我会这样做。 - Nistor Alexandru

@user985482 是的，我已经更新了我的答案，并提供了可能是解决方案的内容。 - Daniel Figueroa