IE替代列计数&列间隙 [英] IE Alternative to Column-Count & Column-Gap

问题描述

我想知道是否有一个IE替代使用 column-count 和 column-gap ？

我已将此帖子关于创建自动为每第五个元素创建新列的列表。 Leniel建议使用 column-count 和 column-gap 的解决方案，但IE不支持。我正在寻找一个倒退的解决方案。

解决方案

我发现这个：使用CSS3的多列布局。阅读标题为 CSS3多栏浏览器支持的部分。它说明了以下内容：

如果您需要支持没有多列支持的浏览器，
有这些浏览器的后备选项。以下是
如何使用 Modernizr 脚本...

1. 在任何其他样式表之后，在HEAD中放置以下SCRIPT标记：

    < script src =http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js>< / script> 
     




2. 在上述行下方添加另一个SCRIPT：

    < script> 
    Modernizr.load（{
    test：Modernizr.csscolumns，
    yep：'columns.css'，
    nope：'no-columns.css'
   }） ; 
   < / script> 
     




3. 创建包含多列CSS的CSS样式表，并将其另存为列。



4. 创建一个包含您的备用CSS的CSS样式表（例如带有float的列），并将其另存为no-columns.css目录。
   在IE和Chrome，Safari或Opera中测试您的网页。

---

如果您对此感兴趣，多列页面提供了JavaScript后备广告。

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

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.

解决方案

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

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...

1. Place the following SCRIPT tag in your HEAD after any other style sheets:

   <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
   

2. Add another SCRIPT below the above line that reads:

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

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

4. Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory. Test your page in IE and Chrome, Safari, or Opera.

---

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

这篇关于IE替代列计数&列间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！