Question

我有一个在FF以外的每个浏览器中看起来都很好的按钮：

<button><div>Button Text</div></button>

要点是我在按钮上有背景＆amp; div使按钮可以缩放到任何宽度。在Firefox中，div比按钮低1px，我不知道为什么。

演示：http://jsfiddle.net/cwolves/FgHV4/4/

简化代码：

<button><div>foo</div></button>

<style>
button {
    border      : 0px;
    background  : #CCC;
    height      : 29px;
    line-height : 29px;
    padding     : 0px;
}

div {
    background  : #AAA;
    height      : 29px;
    line-height : 29px;
    position    : relative;
    left        : 7px;
}
</style>

Answer 1

要使其匹配（例如）Chrome，您需要：

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

请参阅： http://jsfiddle.net/FgHV4/5/

对div的{{1}} is not a valid child的无关注释（在HTML5中）。您应该将其更改为button。

Firefox：嵌套div无法正确对齐

1 个答案: