6

嗨，我似乎在 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 中发生了类似的事情。我从来没有可以解决这个问题。

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

4

2 回答 2

22

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

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

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

防弹 CSS 输入按钮高度

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

于 2012-09-24T21:38:37.913 回答
0

** 我把它留在这里，因为我认为它很有用哦..**

在任何一种情况下，尝试只访问按钮并使用它的 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 之类的东西。

于 2012-09-05T19:20:56.893 回答