为什么绝对定位在< button>工作方式与< div>

问题描述：

我希望下面的代码将我的span放到按钮的左上角，但它不是。为什么呢？

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> 竖线中线（用3px padding我不能解释）。

<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).

使用< div>取代< button>

strong>问题：为什么使用< div> 的按钮（位置：相对）中的绝对定位与布局不同。

Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?

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

Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.

EDIT： 重要 IE 8.0的工作原理与我预期的一致（跨越左上角），我看到的问题是在Firefox （3.6.6）。

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).

答

我建议反对使用< button> 这种方式。这真的很难风格，你最终不得不为不同的浏览器写特定的风格。
我需要实现非常相似的东西，处理了大量的异常和fiddly定位，以适应不同的浏览器渲染，我去这个结构：

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:

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

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

With the button tag reset this way:

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包装<按钮> 。这个系统已经变得更加坚实和可靠。需要更少的css和几乎没有浏览器特定的样式。

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.

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

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>.

为什么绝对定位在< button>工作方式与< div>

相关推荐