IE 替代 Column-Count 和 Column-Gap答案

【问题标题】：IE Alternative to Column-Count & Column-GapIE 替代 Column-Count 和 Column-Gap
【发布时间】：2016-03-24 15:12:25
【问题描述】：

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

我做了这个post 来创建一个自动为每五个元素创建一个新列的列表。 Leniel 提出了一个使用column-count 和column-gap 的解决方案，但IE 不支持。我正在寻找一个备用解决方案。

【问题讨论】：

标签： css internet-explorer

【解决方案1】：

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

如果您需要支持不支持多列的浏览器，那么你应该有这些浏览器的后备选项。这是如何你可以使用Modernizr 脚本来实现...

在您的 HEAD 中任何其他样式表之后放置以下 SCRIPT 标记：

<script src="http://cdnjs.cloudflare.com/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 样式表，并将其保存为同一目录中的 columns.css。
创建一个 CSS 样式表，其中包含您的备用 CSS（例如带有浮动的列）并将其保存为同一目录中的 no-columns.css。在 IE 和 Chrome、Safari 或 Opera 中测试您的页面。

如果您有兴趣这样做，页面Multiple Columns 会提供 JavaScript 后备。

【讨论】：

我不喜欢使用 javascript 来检测 Internet Explorer，我使用条件 cmets：<body>  <div id="page">Your html code here...</div>  </body> 在您的 css 中，您可以像这样制作选择器：#ie-9-or-older #page{ /*some css for your ie*/ }
如果您更喜欢使用 jquery.columnizer.js，这里有一个不错的 Modernizer 脚本 sn-p。 gist.github.com/jimmynotjim/3666470

【解决方案2】：

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

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

Item1 Item4 Item7

项目 2 项目 5 项目 8

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);

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

注意：您不会在浏览器的视图源代码中看到 Modernizr 生成的 CSS 类。对 Firefox 使用 Firebug，如上面的屏幕截图所示或其他一些 DOM 查看器... :) 看看这里：stackoverflow.com/a/7835579/114029

【解决方案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>

【讨论】：