IE替代列计数＆amp;列峡

Question

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

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

Answer 1

我发现了这个：Multi-column Layout with CSS3。阅读标题为 CSS3多列浏览器支持的部分。它陈述如下：

  

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

来做

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

   <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样式表，并将其保存为columns.css在同一目录中。

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

---

如果您对这种方式感兴趣，页面Multiple Columns会提供JavaScript回退。

Answer 2

以下是如何使用多列创建菜单的解决方案，该多列与使用列计数属性创建的菜单相同，并且可以在所有浏览器中使用。

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

Item1 Item4 Item7

Item2 Item5 Item8

Item3 Item6

实施例： http://jsfiddle.net/xrd5Y/16/

// number of columns
var columns = 4;

var $ul = $('ul.multicolumn'),
    $elements = $ul.children('li'),
    breakPoint = Math.ceil($elements.length/columns);
    $ordered = $('<div></div>');

function appendToUL(i) {
    if ($ul.children().eq(i).length > 0) {
        $ordered.append($ul.children().eq(i).clone());
    } 
    else $ordered.append($('<li></li>'));
}

function reorder($el) {
    $el.each(function(){
        $item = $(this);

        if ($item.index() >= breakPoint) return false;

        appendToUL($item.index());
        for (var i = 1; i < columns; i++) {
            appendToUL(breakPoint*i+$item.index());
        }
    });

    $ul.html($ordered.children().css('width',100/columns+'%'));
}

reorder($elements);

Answer 3

这对我有用：不是使用JS或只有IE的条件，你可以直接在样式表中使用Modernizr的类。

如果你在我们的网页上做了一个Inspect Element，你会发现html标签中添加了很多CSS类：

如果用户的浏览器不支持css列，您将看到可用于浮动元素的“no-csscolumns”类。

Answer 4

以下是我为IE和IE Edge发现的简单解决方案，只是将每列按<p> your text </p>段，第2栏<p> your text </p>分开，它对我有效。

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