Question

我希望以下代码将我的跨度放在按钮的左上角，但事实并非如此。那是为什么？

<!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>相对于vertical- 中间行放置（使用3px填充我无法解释）。

用<button> 替换<div> 会将<span>放在左上角。

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

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

编辑： 重要 IE 8.0完全按照我的预期工作（跨越左上角），我看到的问题出在Firefox（3.6.6）中

Answer 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>。

Answer 2

您的问题仅适用于Firefox？（3.6.6） - 无法使用标准CSS修复它。尝试：

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

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

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

2 个答案: