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

Posted 2023-03-06

【中文标题】Firefox 在提交按钮中添加 2px 填充

【英文标题】：Firefox add's 2px padding in a submit button

【发布时间】：2012-08-30 13:41:40

【问题描述】：

嗨，我似乎在使用 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"  id="key"/>
      </form>

    header section form input
        color:#b3aaaa;
        border:1px solid #cccccc;
        float: left;
        padding:5px 8px;
        margin-left: 6px;
    

我该如何纠正这个问题？

如果没有解决方案，任何人都可以为我提供一个解决方案，即输入文本与输入提交相等并且输入文本从上到下居中？

编辑：我已经在另一台计算机上检查了这个，似乎 Firefox 正确呈现了这个我遇到过这种类型的问题，之前相同的浏览器版本在不同的计算机上显示的网站有点不同。上次在 chrome 中发生了类似的事情。我永远无法解决这个问题。

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

【问题讨论】：

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

我也在使用 Firefox 15，由于某种原因，在底部我得到了两个额外的填充像素

老兄，截图？用萤火虫窗口，显示布局？

你是否使用 normalize 或 reset.css 之类的东西来让所有浏览器看起来都一样？

【参考方案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 之类的东西。

【讨论】：

这不可能，因为图像是绝对定位的。无论如何我测试了它，但它没有工作

另外，在您的情况下，将边框设置为：solid 1px #000，因为这是您现在使用的，不是吗。 :)

我已经知道位于顶部且无法单击的图像，它将在某些时候被纠正问题与该图像无关我可以向您保证我已将其删除并且问题仍然存在

如果您没有正确阅读，我的问题是，在 firefox 中，我在底部得到 2px 填充，其余浏览器仅正确显示 firefox 广告 2 个额外像素。图像在这方面并不重要如果我知道我必须修改代码，我会在某个时候修改

@user985482 没错，我已经用可能是解决方案的东西更新了我的答案

【参考方案2】：

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

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

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

Bulletproof CSS input button heights

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

【讨论】：

这个。提交按钮上特定于 Firefox 的隐藏填充必须消失。

在 2016 年，仍然需要在 Firefox 中修复它！补充：我在我的场景中发现，设置input height: 100% ，或者只需要input::-moz-focus-inner border:0;就可以解决问题。