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