CSS столбцы: различные визуализации на Firefox и Chrome

Question

Я пытаюсь установить список, состоящий из 2 столбца (на рабочем столе экрана), используя свойство column CSS:

.footer .double li { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
.footer .double > ul ul { 
 
    padding-left: 40px; 
 
    list-style: circle; 
 
} 
 
.footer .double > ul ul li { 
 
    overflow: visible; 
 
} 
 
.footer .double > ul ul li div { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
@media (min-width: 992px) { 
 
    .footer .double > ul { 
 
    columns: 2; 
 
    -webkit-columns: 2; 
 
    -moz-columns: 2; 
 
    } 
 
    .footer .double > ul ul { 
 
    columns: 1; 
 
    -webkit-columns: 1; 
 
    -moz-columns: 1; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="footer"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-md-3 margin-bottom-20"> 
 
     <img src="http://lorempixel.com/800/400" alt="" class="img-responsive"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-6 margin-bottom-20"> 
 
     <h3 class="margin-top-0">Mappa del sito</h3> 
 
     <div class="double"> 
 
      <!-- subcolumn --> 
 
      <ul class="list-unstyled margin-bottom-0"> 
 
      <li><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></li> 
 
      <li><a href="#">Lorem ipsum dolor sit amet. Tenetur, minus.</a></li> 
 
      <li><a href="#">Odio recusandae et officiis hic fuga corrupti. </a> 
 
       <ul> 
 
       <li><div><a href="#">Sequi aut amet nisi qui eveniet</a></div></li> 
 
       <li><div><a href="#">Ipsam, velit exercitationem dolor sit amet</a></div></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Illo dolore, amet nam ipsum possimus.</a> 
 
       <ul> 
 
       <li><div><a href="#">Numquam sunt, adipisci necessitatibus.</a></div></li> 
 
       <li><div><a href="#">Facere cum temporibus velit illum amet</a></div></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Quisquam libero corrupti repellendus</a></li> 
 
      <li><a href="#">Laboriosam corporis, fuga accusantium ipsa</a> 
 
       <ul> 
 
       <li><div><a href="#">Dolore, consectetur atque</a></div></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></li> 
 
      <li><a href="#">Officia harum animi consequuntur velit</a></li> 
 
      </ul> 
 
      <!-- /subcolumn --> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4 col-md-3 margin-bottom-20"> 
 
     <img src="http://lorempixel.com/800/400" alt="" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

В Firefox это все fine: Я вижу круглые точки в подписях, а столбцы выравниваются правильно сверху.

В Chrome бедствие: суб списки не имеют круга точек, а столбцы не выровнены (кажется, что второй столбец в середине выровнены вместо верхнего совмещаются)

Я написал Fiddle показывая проблему.

Answer 1

Это отличие может быть исправлено с помощью "list-style-position". Браузерный хром рисует круг вне элемента, и он затрагивается, когда вы используете "overflow:hidden" в своем ".footer .double li". Затем с помощью "list-style-position: outside;" в вашем UL это исправить