Por que o posicionamento absoluto dentro de <button> funciona de forma diferente de <div>

Question

Jul 09, 2010, 04:39 PM

Por que o posicionamento absoluto dentro de <button> funciona de forma diferente de <div>

Espero que o código a seguir coloque meu intervalo no canto superior esquerdo do botão, mas isso não acontece. Por que é que?

<!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> é colocado em relação à vertical-meio linha (com preenchimento de 3px, não sei explicar).

Substituindo<button> com<div> faz lugares<span> no canto superior esquerdo.

Pergunta, questão: por que o posicionamento absoluto no botão (com posição: relativo) se comporta de maneira diferente do layout usando<div>? E como faço para corrigir isso?

Antecedentes: eu uso duas divs absolutamente posicionadas no botão para criar um botão de largura flutuante com cantos arredondados.

EDITAR: IMPORTANTE O IE 8.0 funciona exatamente como eu esperava (extensão no canto superior esquerdo), o problema que vejo está no Firefox (3.6.6).