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

前端之家收集整理的这篇文章主要介绍了css – Firefox在提交按钮中添加2px填充前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨我似乎有一些问题,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可以解决这个问题.

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

解决方法

我遇到了这样的问题.然后我发现这个解决问题的CSS东西:
input::-moz-focus-inner { border:0; padding:0 }

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

Bulletproof CSS input button heights

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

猜你在找的CSS相关文章