CSS 列 : different render on Firefox and Chrome

Question

我正在尝试使用 column CSS 属性设置一个 2 列列表(在桌面屏幕上):

.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 中一切正常:我可以在子列表中看到圆点，并且列在顶部正确对齐。

在 Chrome 中，一个灾难:子列表没有圆点，并且列没有对齐(似乎第二列是中间对齐而不是顶部对齐)

我写了一个Fiddle显示问题。

Answer 1

可以使用 "list-style-position" 修复此差异。浏览器 chrome 在元素外部绘制圆圈，当您在 ".footer .double li" 中使用 "overflow:hidden" 时，他会受到影响。然后在您的 UL 中使用 "list-style-position: outside;" 修复它