css - IE 替代 Column-Count & Column-Gap

Question

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

我发表了这篇关于创建一个列表的帖子，该列表会为每五个元素自动创建一个新列。Leniel 提出了一个使用但不受 IE 支持的解决column-count方案column-gap。我正在寻找一个后备解决方案。

Answer 1

我发现了这个：使用 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 中测试您的页面。

---

如果您有兴趣采用这种方式，多列页面提供了 JavaScript 后备。

Answer 2

这是如何使用多列创建菜单的解决方案，它看起来与使用 column-count 属性创建的菜单相同，并且适用于ALL BROWSERS。

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

项目 1 项目 4 项目 7

项目 2 项目 5 项目 8

第 3 项 第 6 项

示例：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

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

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

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

Answer 4

这是我为 IE 和 IE Edge 发现的简单解决方案，只需按段落分隔每一列<p> your text </p>column-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>