如何在兩個欄位中顯示無序列表，確保現代和舊版瀏覽器（包括 Internet Explorer）之間的相容性？

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<div>
  <ul class="columns" data-columns="2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
</div>

(function($) {
  var initialContainer = $('.columns'),
    columnItems = $('.columns li'),
    columns = null,
    column = 1; // account for initial column

  function updateColumns() {
    column = 0;
    columnItems.each(function(idx, el) {
      if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)) {
        column += 1;
      }
      $(columns.get(column)).append(el);
    });
  }

  function setupColumns() {
    columnItems.detach();
    while (column++ < initialContainer.data('columns')) {
      initialContainer.clone().insertBefore(initialContainer);
      column++;
    }
    columns = $('.columns');
  }

  $(function() {
    setupColumns();
    updateColumns();
  });
})(jQuery);

.columns {
  float: left;
  position: relative;
  margin-right: 20px;
}