дисплей: встроенный блок; issue on Firefox

Question

У меня есть свойство inline-block в Firefox и, вероятно, в IE. Я ожидаю тот же результат, что и в Chrome.

скриншот Chrome настольного

Chrome и Firefox таблетки (я должен держать "А" и "BC" вместе в режиме планшета)

Вот проблема с просмотром рабочего стола Firefox. Как вы можете видеть, E не отображается на снимке экрана. Я google, но не нашел решение. 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 составляет около 182 пикселей), поэтому браузер «выталкивает E на странице», потому что он не будет вписываться в пространство, выделенное для него.

Эта проблема размера div вызвана тем, что размер div определяется, когда хром загружается, и не проверяется снова на хром. Вы можете увидеть это, сделав вашу ширину хрома очень большой (уменьшить масштаб с помощью функций браузеров), а затем обновить браузер. Ваш e будет отображаться по желанию, но если вы сделаете свой браузер более узким, а более широкий, медиа-запрос сбросит размер этого div, и он не будет возвращен, чтобы исчезнуть div.

Вы можете исправить это, установив ширину, чтобы она была больше (или равна) с использованием относительной ширины (например, .text {display: inline-block; width: 30%;}) или изменения структуры списка.