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

在兩個欄位中顯示無序列表

在Web 開發領域，在多列中顯示無序列表是一個常見的挑戰。讓我們探討如何在兩個欄位中實現此目的，同時確保與 Internet Explorer 的兼容性。

現代瀏覽器

現代瀏覽器支援 CSS3 columns 模組，該模組提供了一個優雅的解決方案。只需包含以下CSS 程式碼，您就可以輕鬆建立多列清單：

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

這種方法利用現代瀏覽器的本機功能來處理列佈局，從而在不同裝置上獲得一致的體驗。

舊版瀏覽器

不幸的是，Internet Explorer本身不支援 CSS3 欄位。為了支援舊版瀏覽器，需要使用 JavaScript 和 DOM 操作的更複雜的方法。下面說明了使用 jQuery 的一種實作：

<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;
}

此解決方案根據指定的列數動態地將清單項目重新排序到列中。但是，需要注意的是，舊版瀏覽器可能會對佈局施加限制，可能會導致顯示與現代瀏覽器略有不同。

透過這些方法，您可以有效地在兩列中顯示無序列表，從而提供適用於現代和傳統瀏覽器的清單內容的結構化和有組織的視覺化。

以上是如何在兩個欄位中顯示無序列表，確保現代和舊版瀏覽器（包括 Internet Explorer）之間的相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！