display: inline-block; issue on Firefox

时间:2015-09-14 16:00:17

标签: html css google-chrome firefox

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

enter image description here

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

enter image description here

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

enter image description here

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%}
}

1 个答案:

答案 0 :(得分:0)

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

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

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

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