css - 作为父容器和 作为子容器之间奇怪的偏移空间

Question

我需要装饰一个标准的 html 按钮。我取的基础元素 <button> 而不是 <input> ，因为我决定元素必须是父容器。并且有子元素 <div> 在里面。这 <div> 元素将成为装饰的核心元素，并应占据父元素按钮的整个空间。

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

在级联样式表中它可能看起来像这样:

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>

因此，Opera(10) 做得好，webkit Chrome(6) 和 Safari(4) 也做得好，

但是Internet Explorer(8) 不好 - DOM 检查器在顶部和左侧显示一些奇怪的偏移空间，FireFox(3) 也不好 - DOM Inspector 显示<div>在 css-property 中获得一些负值 right:和 bottom: .即使此属性将设置为零 (0)，DOM-Inspector 仍会显示相同的负值。

---

我的脑袋都快碎了。请帮帮我，解决这个问题!

---

我尝试了很多方法来解决这个问题，但仍然没有得到正确的结果。 Internet Explorer 显示如下:

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

Firefox 是这样的:

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

其他浏览器都是正确的。

Answer 1

解决方案:

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