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属性的东西都不会被应用.