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在元素外部绘制圆圈，当您在"overflow:hidden"中使用".footer .double li"时，他会受到影响。然后在您的UL中使用"list-style-position: outside;"进行修复

CSS列：Firefox和Chrome上的不同渲染

1 个答案: