display: inline-block; issue on Firefox

Question

I have with inline-block property in Firefox and probably in IE also. I am expecting the same result as I am getting in Chrome.

Chrome desktop screenshot

Chrome and Firefox tablet (I have to keep "A" and "BC" together in tablet view)

Here is a problem with Firefox desktop view. As you can see E is not visible in screenshot. I google it but did not find the solution. 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%}
}

Answer 1

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

基本上，浏览器以一个宽度创建（在我的情况下：142px，该div内部的内容大约为182px），因此浏览器将＆＃34; t关闭页面＆ ＃34;因为它不适合分配给它的空间。

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

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