IE 替代列计数 &柱间隙

本文介绍了IE 替代列计数 &柱间隙的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想知道是否有使用 column-count 和 column-gap 的 IE 替代方法?

I am wondering if there is an IE alternative to using column-count and column-gap?

我做了这个帖子关于创建一个自动的列表为每五个元素创建一个新列.Leniel 提出了一种使用 column-count 和 column-gap 的解决方案，但这不受 IE 支持.我正在寻找备用解决方案.

I have made this post about creating a list that automatically create a new column for every fifth element. Leniel has suggested a solution that uses column-count and column-gap but this is not supported by IE. I am looking for a fall back solution.

推荐答案

我发现了这个:CSS3 多列布局.阅读标题为CSS3 多列浏览器支持的部分.它声明如下:

I found this: Multi-column Layout with CSS3. Read the section titled CSS3 Multi-Column Browser Support. It states the following:

如果您需要支持没有多列支持的浏览器，那么你应该有这些浏览器的后备选项.这是如何您可以使用 Modernizr 脚本...

If you need to support browsers that don't have multi-column support, then you should have a fallback option for those browsers. Here is how you can do it with the Modernizr script...

将以下 SCRIPT 标记放在任何其他样式表之后的 HEAD 中:

Place the following SCRIPT tag in your HEAD after any other style sheets: <script src="cdnjs.cloudflare/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

在上面一行下面添加另一个脚本:

Add another SCRIPT below the above line that reads:

<script> Modernizr.load({ test: Modernizr.csscolumns, yep: 'columns.css', nope: 'no-columns.css' }); </script>

创建一个包含多列 CSS 的 CSS 样式表，并将其另存为 column.css 在同一目录中.

Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.

页面 Multiple Columns 如果您有兴趣，可以提供 JavaScript 后备往这边走.

The page Multiple Columns provides a JavaScript fallback if you're interested going this way.