我想知道是否有一个IE替代使用 column-count 和 column-gap ?
我已将此帖子关于创建自动为每第五个元素创建新列的列表。 Leniel建议使用 column-count 和 column-gap 的解决方案,但IE不支持。我正在寻找一个倒退的解决方案。
解决方案我发现这个:使用CSS3的多列布局。阅读标题为 CSS3多栏浏览器支持的部分。它说明了以下内容:
如果您需要支持没有多列支持的浏览器,有这些浏览器的后备选项。以下是如何使用 Modernizr 脚本...
在任何其他样式表之后,在HEAD中放置以下SCRIPT标记:
< script src =cdnjs.cloudflare/ajax/libs/modernizr/2.0.6/modernizr.min.js>< / script>
在上述行下方添加另一个SCRIPT:
< script> Modernizr.load({ test:Modernizr.csscolumns, yep:'columns.css', nope:'no-columns.css'}) ; < / script>
创建包含多列CSS的CSS样式表,并将其另存为列。
如果您对此感兴趣,多列页面提供了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...
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>Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.
The page Multiple Columns provides a JavaScript fallback if you're interested going this way.
更多推荐
IE替代列计数&列间隙
发布评论