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）做好， webkits Chrome （6）和 Safari （4）也做好，

但 Internet Explorer （8）不好 - DOM Inspector在顶部和左侧显示一些奇怪的偏移空间， FireFox （3）是< / strong>还错误 - 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;}

Answer 2

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

您也可以尝试将按钮设置为display: inline-block（以及Firefox {3}的-moz-inline-box，这可能会让您更直接地控制其样式及其子项的样式。< / p>

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

CSS

HTML

2 个答案: