IE替代列计数和列间隙

Question

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

我发表了一篇关于创建列表的文章,该列表为每个第五个元素自动创建一个新列.Leniel建议,使用的解决方案column-count,并column-gap但这不支持IE.我正在寻找一个后备解决方案.

Answer 1

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

如果您需要支持没有多列支持的浏览器,那么您应该为这些浏览器提供后备选项.以下是使用Modernizr脚本执行此操作的方法...

在任何其他样式表之后,将以下SCRIPT标记放在HEAD中:
```
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
```
Run Code Online (Sandbox Code Playgroud)

在上面的行下面添加另一个SCRIPT,内容如下:

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

创建一个包含多列CSS的CSS样式表,并将其保存为columns.css在同一目录中.
创建一个包含回退CSS的CSS样式表(例如带浮点的列),并将其保存为no-columns.css在同一目录中.在IE和Chrome,Safari或Opera中测试您的页面.

如果您对这种方式感兴趣,则" 多列 "页面会提供JavaScript回退.

我不想使用javascript来检测Internet Explorer,我使用条件注释:`<body> <! - [if lte IE 9]> <div id = ie-9-or-older"> <![endif] - - > <div id ="page">你的html代码在这里...... </ div> <! - [if lte IE 9]> </ div> <![endif] - > </ body>`In你的css,你可以选择这样的选择器:`#ie-9-or-older #page {/*你的ie*/}的一些css` (2认同)