Question

我正在尝试使用button来设置搜索表单的主题，我在button中遇到了文本定位问题。 Chrome和Opera正在正确显示按钮，但Firefox不是。

HTML：

<button type="submit"><span>Search</span></button>

CSS：

button {
    border: 0;
    background: red;
    padding: 0;
    width: 200px;
    height: 50px;
    position: relative;
}
button span {
    position: absolute;
    top: 0;
    left: 0;
}

在Opera和Chrome中，span位于左上角。在Firefox中，顶部和左侧的填充以及顶部位置从button高度的中间开始。

我做错了什么？

现场演示：http://doctype.n-joy.sk/button/

由于

Answer 1

这是一个奇怪的。看起来Firefox在按钮元素中保留了某种专有的填充。我能够实现的解决方法是一个只有FF的CSS，它的跨度有一个相当难看的负边缘...真的快速解决，也许其他人可以用更好的东西。

button {
  background: red;
  border: 0;
  padding: 0;
  margin: 0;
}
button span {
  display: block;
  background: blue;
  width: 200px;
  height: 50px;
}
// FF only:
@-moz-document url-prefix() {
    button span {
        margin: -1px -3px;
    }
}

Answer 2

看起来你做的一切都很正确，但是从Firefox的默认样式和附加到按钮的一些未记录的隐藏（伪）元素中出现了一些黑暗魔法。

我还没有找到可以帮助您解决此按钮问题的规则，但您可能会尝试自行扫描默认样式。如果您输入Firefox的地址栏：resource://gre-resources/forms.css，那么您将看到其中一个默认样式表。

一些可疑的选择器（只是疯狂的猜测）是：*|*::-moz-button-content或input > .anonymous-div。第二个似乎没有为button定义，但谁知道魔法在哪里呢？

无论如何，我想，您可能会将其报告为错误。

Answer 3

在Twitter Bootstrap reset.less文件中找到此内容。它纠正了这种行为。

button,
input {
    *overflow: visible; // Inner spacing ie IE6/7
    line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
    padding: 0;
    border: 0;
}

请注意，评论较少...而不是CSS，因此您必须将//替换为/* ... */

在HTML <button>标签</button>中定位

3 个答案: