Firefox包含内联div，但其他浏览器则没有

Question

我有三个内联div，父容器是button。我需要为三个div设置特定的宽度。这是 jsFiddle 。

<button>
    <div style="width: 70px; background-color: #0f0;"></div>
    <div style="width: 10px; background-color: #f0f;"></div>
    <div style="width: 20px; background-color: #00f;"></div>
</button>

正如您所看到的，宽度加起来为100，而CSS中的按钮宽度设置为100px。

* {
    box-sizing: border-box;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    background: #000;
    width: 100px;
    height: 30px;
}

button > div {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

Firefox（不正确）：

Chrome（正确）：

我的问题是，当div的总宽度不超过父级宽度时，为什么Firefox会包装div？我该如何解决这个问题？

Answer 1

您应该添加（http://jsfiddle.net/HTr7y/18/）

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

FF为按钮添加特殊大小