<button> 作为父容器和 <div> 作为子容器之间的奇怪偏移空间答案

【问题标题】：Strange offset space between <button> as parent container and <div> as child<button> 作为父容器和 <div> 作为子容器之间的奇怪偏移空间
【发布时间】：2010-05-18 05:30:38
【问题描述】：

我需要装饰一个标准的 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)做得很好， webkits Chrome(6) 和 Safari(4) 也很好，

但是 Internet Explorer(8) 很糟糕 - DOM Inspector 在顶部和左侧显示一些奇怪的偏移空间，FireFox(3) 是也 bad - 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.

其他浏览器都是正确的。

【问题讨论】：

标签： css dom xhtml

【解决方案1】：

解决办法：

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

【讨论】：

【解决方案2】：

<button> 通常有 margin、padding 和 border 由浏览器的默认 CSS 设置。清除这些通常是我了解元素本身及其子元素的尺寸的第一步。

您也可以尝试将按钮设置为 display: inline-block（对于 Firefox -moz-inline-box），这样您可以更直接地控制其样式及其子项的样式。

【讨论】：

@Maxja，您没有清除<button> 的margin 或border。
@Maxja，另请参阅我的编辑。许多浏览器对表单元素都有特殊的显示特性，可以通过在 CSS 中显式设置 display 属性来覆盖这些特性，从而让您更全面地控制其呈现。