Firefox 包装了内联 div，但其他浏览器没有答案

【问题标题】：Firefox wraps inline divs, but other browsers do notFirefox 包装了内联 div，但其他浏览器没有
【发布时间】：2014-06-18 15:55:08
【问题描述】：

我有三个内联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？我该如何解决这个问题？

【问题讨论】：

标签： html css firefox

【解决方案1】：

您应该添加 (http://jsfiddle.net/HTr7y/18/)

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

FF 为按钮添加特殊尺寸

【讨论】：