显示：内联块；火狐上的问题答案

【问题标题】：display: inline-block; issue on Firefox显示：内联块；火狐上的问题
【发布时间】：2015-09-15 02:10:06
【问题描述】：

我在 Firefox 和 IE 中都有 inline-block 属性。我期待与 Chrome 相同的结果。

Chrome 桌面截图

Chrome 和 Firefox 平板电脑（我必须在平板电脑视图中将“A”和“BC”放在一起）

这是 Firefox 桌面视图的问题。如您所见，E 在屏幕截图中不可见。我用谷歌搜索但没有找到解决方案。 JSFiddle

HTML

<div class="text-center">
    <div class="text">
        <div class="col-first">A</div>
        <div class="col-last">
            <ul class="links">
                <li>B</li>
                <li>C</li>
            </ul>
        </div>
        <div class="col-middle">
            <ul>
                <li>C</li>
                <li>D</li>
                <li>E</li>
            </ul>
        </div>
    </div>
</div>

CSS

ul{ margin:0; padding:0; list-style:none}

.text-center{text-align:center}
.text{ display:inline-block}
.col-first {
    float: left;
    padding-right: 20px;
}

.col-last {
    float: right;
}

.col-middle {
    overflow: hidden;
    white-space: nowrap;
}

.social li{float:left}
.col-middle li{ display:inline-block; padding:0 17px}

@media(max-width:768px){
    .col-first {float:none;display:inline-block; padding-right:10px; vertical-align:top}
    .col-last {float:none;display:inline-block}
    .col-middle { width:100%}
}

【问题讨论】：

这似乎是与display: inline-block; 相关的“空白” 问题。有关更多信息，请参阅this reference...
您的小提琴与您的 HTML 源代码不同。无论如何，我看不出两个浏览器之间的行为有什么不同。
@MrLister：这里可以看出区别jsfiddle.net/f5t42key/5/embedded/result
@amit 这很奇怪；如果您从 Chrome 的狭窄窗口开始，然后将窗口变宽，则 E 会丢失。但是如果你从一个宽窗口开始，E就在那里。很奇怪。

标签： html css google-chrome firefox

【解决方案1】：

如果你弄乱了列宽，你可以看到发生了什么。

本质上，是由浏览器以一个宽度创建的（在我的情况下：142px，该 div 内的内容大约为 182px），因此浏览器“将 E 从页面中移除”，因为它不适合分配给它的空间。

这个 div 大小问题是因为 div 的大小是在 chrome 加载时确定的，并且没有被 chrome 再次检查。您可以通过使您的 chrome 宽度非常大（使用浏览器功能缩小）然后刷新浏览器来看到这一点。您的 e 将根据需要显示，但如果您将浏览器变窄，然后再变宽，媒体查询将重置该 div 的大小，并且不会重新设置以使 div 消失。

您可以通过使用相对宽度（例如 .text{ display:inline-block;width:30%;}）将宽度设置为更大（或等于）或更改列表结构来解决此问题。

【讨论】：