HTML 中的定位

发布于 2024-11-29 02:34:35 字数 718 浏览 1 评论 0原文

我正在尝试使用 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 中，顶部和左侧的内边距以及顶部位置从按钮高度的中间开始。

我做错了什么？

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

谢谢

原文

I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.

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;
}

In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.

What am I doing wrong?

Live demo: http://doctype.n-joy.sk/button/

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泛泛之交 2024-12-06 02:34:35

这是一个奇怪的事情。看起来 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;
    }
}

That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.

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;
    }
}

回复收藏 0 原文

梦巷 2024-12-06 02:34:35

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

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

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

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

回复收藏 0 原文

执妄 2024-12-06 02:34:35

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

请注意，注释位于 less... 而不是 CSS 中，因此您必须将 // 替换为 /* ... */

Found this in Twitter Boostrap reset.less file.
It corrects this behavior.

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;
}

Note that comments are in less... not CSS so you have to replace // by /* ... */

回复收藏 0 原文

~没有更多了~