为什么 <button> 中的绝对定位与 <div> 的工作方式不同答案

【问题标题】：Why does absolute positionining within <button> works differently from <div>为什么 <button> 中的绝对定位与 <div> 的工作方式不同
【发布时间】：2011-10-13 12:37:38
【问题描述】：

我希望下面的代码将我的 span 放在按钮的左上角，但事实并非如此。这是为什么呢？

<!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> 相对于垂直-middle 线放置（我无法解释 3px 填充）。

将<button> 替换为<div>确实将<span> 放在左上角。

问题：为什么按钮内的绝对定位（使用 position:relative）与使用 <div> 的布局表现不同？我该如何解决？

背景：我在按钮内使用两个绝对定位的 div 来创建一个带有圆角的浮动宽度按钮。

编辑： 重要提示 IE 8.0 完全符合我的预期（跨越左上角），我看到的问题是 Firefox (3.6.6) .

【问题讨论】：

令人着迷...我以为是margin/padding，但似乎并非如此...
我不确定这是否是上述 sn-p 的功能，但您的实际代码中是否缺少文档类型？
是的，实际页面确实有文档类型（添加到问题中）。
作为一个有趣的注释，top:-50% 会将其定位在您想要的位置。
是的（或 51%，因为 50% 可能会排在首位）。但我想避免为 Firefox 和 IE 设置单独的部分。现在我正在使用伪装成按钮的标签。

标签： html css css-position

【解决方案1】：

我建议不要以这种方式使用<button>。样式化真的很困难，你最终不得不为不同的浏览器编写特定的样式。我需要实现非常相似的东西，在处理了大量异常和繁琐的定位以适应不同的浏览器渲染之后，我选择了这个结构：

<div class="button">
 <span>
  <button>Text</button>
 </span>
</div>

用这种方式重置按钮标签：

button {
    background:none repeat scroll 0 0 transparent;
    border:0 none;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    overflow:visible;
    padding:0;
   position:relative;
 }

您甚至可以在页面加载时使用 js 包装 <button>。事实证明，这个系统更加稳固可靠。需要更少的 css 并且几乎不需要浏览器特定的样式。

更新：正如我在下面评论的，包装元素不应该是<a> 标签。请记住，我们需要<button> 来保持其功能，我们只需要它是文本（表单仍然会在输入时提交）。您仍然可以重复使用您可能用于将标准链接转换为可扩展按钮小部件的任何 CSS，仅在这种情况下它是 <div> 而不是 <a>。

【讨论】：

我最终使用标记，这样我就可以使用 href 属性代替按钮的/submit name 属性，并使用 jQuery 将所有这些进入按钮小部件。您如何处理表单上的回车键？有 jQuery 插件吗？
您不能将包裹在

【解决方案2】：

您的问题只出在 Firefox 上？？ (3.6.6) - 无法使用标准 CSS 修复它。试试：

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

希望 Firefox 能做到这一点。祝你好运！

【讨论】：