Css IE列计数的替代方案&；柱间隙

我想知道除了使用

列计数

和

列间距

，是否还有IE替代方案

我已经做了关于创建一个列表，自动为每五个元素创建一个新列。Leniel建议了一种使用

列计数和
列间距的解决方案，但IE不支持这一点。我正在寻找一种后备解决方案。
我发现了这一点：。阅读标题为CSS3多列浏览器支持的部分。它声明如下：

如果您需要支持不支持多列的浏览器，
然后，您应该为这些浏览器提供一个回退选项。这里是如何
你可以用脚本来做

将以下脚本标记放在任何其他样式表之后：

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



在上行下方添加另一个脚本，内容如下：

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


现代化负荷({
测试：使色谱柱现代化，
是：“columns.css”，
否：“没有列。css”
});

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

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

如果您有兴趣这样做，该页面提供了一个JavaScript回退。
以下是对我有效的方法：您可以直接在样式表中使用Modernizer的类，而不是使用JS或IE-only条件

如果您在我们的网页上执行Inspect元素，您将看到html标记中添加了许多CSS类：


如果用户的浏览器不支持css列，您将看到一个“no-csscolumns”类，您可以使用它来浮动元素
 这里是一个解决方案，如何使用多列创建菜单，它看起来与使用列计数属性创建的菜单相同，并在所有浏览器中工作

这是通过浮动元素实现的，但这里的技巧是在javascript（或服务器端）中重新排序元素，使它们自然流看起来是上下而不是左右的

Item1 Item4 Item7

项目2项目5项目8

项目3项目6

例如：

//列数
var列=4；
变量$ul=$（'ul.multicolumn'），
$elements=$ul.children（'li'），
断点=Math.ceil（$elements.length/columns）；
$ordered=$（''）；
函数附录（一）{
如果（$ul.children（）.eq（i）.length>0）{
$ordered.append（$ul.children（）.eq（i.clone（））；
} 
else$ordered.append（$（'
'）；
}
函数重新排序（$el）{
$el.每个（函数（）{
$item=$（此项）；
if（$item.index（）>=断点）返回false；
appendToUL（$item.index（））；
对于（变量i=1；i
这是我为IE和IE Edge找到的一个简单解决方案，只需将每一列按段落分开，你的文本，第2列，你的文本，它对我很有效

#subfootera {
    with:100%;
    text-align:left;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-shadow:1px 1px 1px #999;

}

.subfooterb {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
}

  <div id="subfootera">
    <div class="subfooterb">
    <p>Your Text.</p>
    <p>Your text or an img</p>
     </div>
  </div>

#子主题{
有：100%；
文本对齐：左对齐；
填充顶部：20px；
垫底：20px；
字体系列：Verdana，日内瓦，无衬线；
字体大小：14px；
字体大小：粗体；
颜色：#000；
文本阴影：1px 1px 1px#999；
}
.子主题b{
-webkit列数：2；/*Chrome、Safari、Opera*/
-moz列计数：2；/*Firefox*/
列数：2；
-webkit列间距：10px；/*Chrome、Safari、Opera*/
-moz列间距：10px；/*Firefox*/
柱间距：10px；
}
你的文字

你的短信还是img

我不喜欢使用javascript检测internet explorer，我使用条件注释：
您的html代码在这里
在你的css中，你可以制作如下选择器：
#ie-9或更老的#page{/*一些ie的css*/}
如果你喜欢使用jquery.columnizer.js，这里有一个很好的Modernizer脚本片段。注意：在浏览器的源代码视图中，您不会看到Modernizer生成的
CSS
类。对Firefox使用
Firebug
，如上面的屏幕截图所示，或者使用其他一些DOM查看器…：）请看这里：
#subfootera {
    with:100%;
    text-align:left;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-shadow:1px 1px 1px #999;

}

.subfooterb {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
}

  <div id="subfootera">
    <div class="subfooterb">
    <p>Your Text.</p>
    <p>Your text or an img</p>
     </div>
  </div>