在 HTML <button> 标签中定位答案

【问题标题】：Positioning in HTML <button> tag在 HTML <button> 标签中定位
【发布时间】：2012-09-27 19:19:18
【问题描述】：

我正在尝试使用 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/

谢谢

【问题讨论】：

你确定这是你真正的 CSS 吗？您已经为 class “按钮”定义了规则，而不是 <button> 标记。
这不是真正的 css.. 我删除了点.. 只是在这里是错误的。现场演示在这里：doctype.n-joy.sk/button

标签： html css firefox button positioning

【解决方案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;
    }
}

【讨论】：

我想问题不在于这个边距，而在于绝对位置不是从按钮元素的顶部开始，而是从中间开始。一个负面的top 属性，其值为按钮高度的一半是一种解决方法。
感谢这个解决方法，但我不喜欢这样。现在我用相对定位的 div 包裹了按钮。

【解决方案2】：

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

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

一些可疑的选择器（只是胡乱猜测）是：*|*::-moz-button-content 或 input > .anonymous-div。第二个似乎没有为button 定义，但谁知道还有什么神奇之处呢？

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

【讨论】：

无论如何，我找到了简单的解决方案.. 用 position: relative 将按钮包装到另一个 div 并删除按钮的位置.. 再次查看演示站点.. div#example1 是'旧方法”，而 div#example2 是“新方法”。
哦，我发现了已经报告的错误：bugzilla.mozilla.org/show_bug.cgi?id=437722（嗯..三年前！）

【解决方案3】：

在 Twitter Boostrap 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;
}

注意 cmets 在 less... 不是 CSS 所以你必须用 /* ... */ 替换 //

【讨论】：