Strange offset space between <button> as parent container and <div> as child

I need to decorate a standard html button. The base element I took <button> instead of <input>, cos I decided that the element must be a parent container. And there is child element <div> in it. This <div> element will be been the core element for decoration, and should occupy the entire space of the parent element - button.

<button>
<div>*decoration goes here*</div>
</button>

And within Cascading Style Sheets it might be looks like this:

css

body { background: *red*; }
button, div { 
outline: 0; margin: 0; border: 0 none; padding: 0; 
font-size: 0; line-height: 0;
display: block;
}
button {
width: *150*px; 
height: *50*px; 
background: *green*; 
position: relative;
}
div {
width: 100%; height: 100%; 
background: *black*; 
position: absolute; 
top: 0; left: 0;
}

html

<button type="button">
<div>*decoration goes here*</div>
</button>

So, Opera(10) is doing we开发者_如何学编程ll, webkits Chrome(6) and Safari(4) is doing also well,

but Internet Explorer(8) is bad - DOM Inspector shows some strange Offset space in top and left, FireFox(3) is also bad - DOM Inspector shows that <div> get some negative value in css-property right: and bottom:. Even if this property will set to zero(0) DOM-Inspector still shows same negative value.

I almost broke my brain. Help me, solve this problem, please!

I tried to solve this problem in many ways, but still I don't get correct results. Internet Explorer showing like this:

Internet Explorer showing like this http://lh4.ggpht.com/_Mg2QP5yqWmc/S_J5HX2wRFI/AAAAAAAAAKk/_a_0VCJodHE/s800/iexplorer.jpg

and Firefox like this:

Firefox like this http://lh6.ggpht.com/_Mg2QP5yqWmc/S_J5HQluaxI/AAAAAAAAAKo/PcOsmci9NOk/s800/firefox.jpg.

Other browsers are correct.

The solution :

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

<button> usually has margin, padding, and border set by the browser's default CSS. Clearing those is usually my first step with making sense of the dimensions of the element itself and its children.

You also might try setting the button to be display: inline-block (and -moz-inline-box for Firefox < 3), which might give you a little more direct control of its styles and those of its children.

Still today 12 years later the gap is still lingering. if the border is removed the space for the border still there and taking up space. the one thing that remove the space/gap was setting the parent div to display: flex + the bellow on the button:

margin: 0;
padding: 0px;
border-radius: 0;
border-image: 0;
border-width: 0px;

With and Without flex sample: