在一个提交按钮Firefox中的2px的填充(Firefox add's 2px paddi

您好我似乎有一些问题与Firefox添加填充的2点额外的像素在提交button.I在Chrome和IE9测试了这一点，这两种浏览器渲染代码确定，火狐似乎在底部到要添加2像素填充与右上方corner.Here的关键背景提交按钮的网站：

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;
    }

我该如何纠正呢？

如果这个无解的任何人都可以请提供我在女巫的解决方案输入文本是输入等于提交和输入文本是由上下中心？

编辑：我已经在另一台计算机检查这一点，似乎火狐之前，同样的浏览器版本显示在网站上的不同computers.Last时间类似的事情在发生chrome.I从未有点不同呈现此正确我也遇到过这种类型的问题可以解决这个问题。

任何人都知道为什么同样的浏览器将呈现不同的网页在不同计算机上使用相同的屏幕尺寸和分辨率？

Answer 1:

我是有这样的问题。 后来我发现这个CSS是解决了这个问题啄：

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

该解决方案被赋予在这个博客帖子评论：

防弹CSS输入按钮的高度

正如帖子里说：这是因为火狐（用户代理）自己的CSS样式使用!important和任何一个试图做覆盖CSS属性将不会应用。

Answer 2:

**我离开这个在这里，因为我认为这是非常有用anywhoo .. **

在这两种情况下尝试访问刚刚按钮和玩的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的什么的。

文章来源: Firefox add's 2px padding in a submit button