html - Firefox 渲染菜单图像不正确

Question

大家好 - 我想知道是否有人可以对我遇到的问题提供任何见解，我无法理解。最初这是 Chrome 的一个问题，但自从修复后，它现在是 Firefox 的问题。

查看以下左侧菜单图像。当它在 Firefox 中呈现时，“go”按钮出于某种原因悬停在下方。这在其他浏览器中不会发生。

它在 Firefox 中的外观：

Firefox 菜单 http://desmond.imageshack.us/Himg254/scaled.php?server=254&filename=20212630.jpg&res=landing

这是HTML和CSS

我正在使用 Firefox 14.0.1

Answer 1

将其包含在您的样式表中：

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

问题是 Firefox 在按钮和输入中放置了一些默认填充。由于您的搜索元素需要一个特定的宽度，所以那一点点填充就会把它弄乱。

上面的代码删除了该填充。在许多重置样式表中，它是一段常见的“代码”。