为什么
我希望以下代码将我的跨度放置到按钮的左上角，但事实并非如此。这是为什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type='text/css'>
</style>
</head>
<body>
<button style='height:100px;width:100px;position:relative;'>
<span style='position:absolute;top:0;left:0;'>text</span>
</button>
</body>
</html>
相对于垂直中线放置（带有 3px 填充，我无法解释）。
将
问题：为什么按钮内的绝对定位（使用位置：相对）与使用
背景：我在按钮内使用两个绝对定位的 div 来创建带有圆角的浮动宽度按钮。
编辑： 重要 IE 8.0 的工作方式完全符合我的预期（位于左上角），我看到的问题是在 Firefox (3.6.6) 中。
I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type='text/css'>
</style>
</head>
<body>
<button style='height:100px;width:100px;position:relative;'>
<span style='position:absolute;top:0;left:0;'>text</span>
</button>
</body>
</html>
<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).
Replacing <button> with <div> does places <span> at the top-left corner.
Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?
Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.
EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我建议不要以这种方式使用
通过这种方式重置按钮标签：
您甚至可以使用 js 来包装<按钮>。事实证明，该系统更加坚固可靠。需要更少的 CSS，几乎不需要浏览器特定的样式。
更新：
正如我在下面评论的，包装元素不应该是
标签。请记住，我们需要I advice against using a
<button>this way. It is really difficult to style and you'll end up having to write specific styles for different browsers.I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:
With the button tag reset this way:
You can even use js to wrap the
<button>on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.Update:
As I commented below, the wrapping element should not be an
<a>tag. Remember that we need the<button>to keeps its functionality, we just need it to be text only (form will still submit on enter).You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a
<div>instead of an<a>.你的问题只出在 Firefox 上吗？ (3.6.6) - 无法使用标准 CSS 修复它。尝试一下：
这对 Firefox 来说很有希望。祝你好运！
Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:
That will do it for Firefox hopefully. Good luck!