<button> padding lässt nicht auf 0 reduzieren

[Tobias Braun]

Hallo zusammen,

ich habe ein echt kurioses Problem und konnte bei Google auch nichts wirklich hilfreiches finden... darum nun mein Post hier:

Ich habe folgendes HTML Konstrukt:

<button type="button">  
    <div></div>  
</button>

Folgende CSS Eigenschaften sind definiert:

  
button {  
background: black;  
margin: 0;  
padding: 0;  
border: 0;  
}  
  
div {  
background: red;  
width: 120px;  
height: 30px;  
}  

Nun zu meinem Problem... Eigentlich sollte bei diesem Code der Browser lediglich den roten DIV Container anzeigen da dieser sich ja innerhalb des Buttons befindet und diesen komplett ausfuellt.

IE8 Windows, Safari 4 Mac zeigen es genau so an wie ich es mir wünschte.

FF 3.5.2 Win und Mac, Safari 4 Win nehmen irgendwo her einen geisterhaften abstand, so als wuerde man padding: 1px 3px; im button definieren.

Statt DIV habe ich auch schon SPAN oder IMG versucht. Mit dem unterschied das man unterhalb des Containers statt 1px nun 3px abstand hat.

Weiss hier jemand Rat?