CSS を使用して複数列のリストを作成し、Internet Explorer との互換性を処理するにはどうすればよいですか?

CSS を使用してリストから列を作成する

Web ページには、過度にスクロールする長いリストがあります。読みやすさを向上させるために、リストが大きくなるにつれて大規模な手動調整を必要とせずに、このリストを複数の列で表示したいと考えています。

CSS は簡単な解決策を提供します。

ul {
    column-count: 4;
    column-gap: 20px;
}

この CSS コードは、リストは 4 つの列に分割され、列間には 20 ピクセルの隙間があります。

クロスブラウザ互換性

列を作成するための CSS ソリューションは、Internet Explorer 9 以前を除くブラウザー間で広くサポートされています。

Internet Explorer の代替

Internet Explorer との互換性が必要な場合は、Columnizer jQuery などの JavaScript の代替手段を検討できます。 plugin.

Internet Explorer の Float へのフォールバック

Internet Explorer 専用の代替手段は、Float フォールバックを使用することです。これにより、項目の順序が正しくなくなる可能性がありますが、見た目は次のようになります。

li {
    width: 25%;
    float: left
}

プロジェクトにすでに存在する場合は、Modernizr を使用してこのフォールバックを選択的に適用できます。

以上がCSS を使用して複数列のリストを作成し、Internet Explorer との互換性を処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。