IE Альтернатива столбцу-графу и столбцу-пробелу

Мне интересно, есть ли IE альтернатива использованию column-count и column-gap?

Я сделал этот пост о создании списка, который автоматически создает новый столбец для каждого пятого элемента. Leniel предложила решение, которое использует column-count и column-gap, но это не поддерживается IE. Я ищу решение для решения проблемы.

Ответы

Ответ 1

Я нашел это: Многостолбцовый макет с CSS3. Прочтите раздел под названием CSS3 Multi-Column Browser Support. В нем указано следующее:

Если вам необходимо поддерживать браузеры, которые не поддерживают много столбцов, то у вас должен быть резервный вариант для этих браузеров. Вот как вы можете сделать это с помощью Modernizr script...

Поместите следующий тег SCRIPT в HEAD после любых других таблиц стилей:
```
<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 (например, столбцы с float) и сохраните его как no-columns.css в том же каталоге. Проверьте свою страницу в IE и Chrome, Safari или Opera.

Страница Несколько столбцов предоставляет резервную копию JavaScript, если вы заинтересованы в этом.

Ответ 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);

Ответ 3

Вот что работает для меня: вместо использования JS или только для IE, вы можете использовать классы Modernizr непосредственно в своей таблице стилей.

Если вы используете элемент Inspect на нашей веб-странице, вы увидите, что в теге html добавлено несколько классов CSS:

Если браузер пользователя не поддерживает столбцы css, вы увидите класс "no-csscolumns", который вы можете использовать для размещения элементов.

Ответ 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>