IE Alternativa a Columna-Cuenta & Columna-Gap

Question

Me pregunto si existe una alternativa de IE para usar column-count y column-gap?

He creado este post para crear una lista que crea automáticamente una nueva columna para cada quinto elemento. Leniel ha sugerido una solución que usa column-count y column-gap, pero IE no lo admite. Estoy buscando una solución alternativa.

Answer 1

He encontrado esto: Multi-column Layout with CSS3. Lea la sección titulada CSS3 Multi-Column Browser Support. Se afirma lo siguiente:

Si tiene que soportar los navegadores que no tienen el apoyo de varias columnas, entonces debería tener una opción de reserva para esos navegadores. Aquí es cómo lo puede hacer con el guión Modernizr ...

1. Coloque la siguiente etiqueta SCRIPT en la cabeza después de las otras hojas de estilo:

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

2. Añadir a continuación otro guión la línea anterior que dice:

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

3. Crear una hoja de estilo CSS tha t incluye su CSS de columnas múltiples y lo guarda como columns.css en el mismo directorio.

4. Cree una hoja de estilo CSS que contenga su CSS alternativo (como columnas con float) y guárdelo como no-columns.css en el mismo directorio. Pon a prueba tu página en IE y Chrome, Safari u Opera.

---

La página Multiple Columns proporciona una alternativa en caso de JavaScript que le interesa ir de esta manera.

Answer 2

Esto es lo que funciona para mí: en lugar de utilizar JS o un condicional solo de IE, puede usar las clases de Modernizr directamente en su hoja de estilo.

Si un Inspeccionar elemento en nuestra página web, verá que hay muchas clases CSS añadidas en la etiqueta html:

Si el navegador del usuario no soporta columnas css verá una clase "no-csscolumns" que puede usar para flotar elementos.

Answer 3

Aquí hay una solución sobre cómo hacer un menú con multicolumnas que se ve igual que el creado con la propiedad de conteo de columnas y funciona en TODOS LOS NAVEGADORES.

Esto se hace con los elementos flotantes, pero el truco aquí es para reordenar los elementos en JavaScript (o del lado del servidor) para que flujo natural parece como arriba-abajo en lugar izquierda-derecha

Elemento1 elemento4 item7

Item2 item5 Item8

Elemento3 Item6

Ejemplo: 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 4

Aquí es una solución simple que descubrí para IE y el IE Edge acaba de separar cada columna en el párrafo <p> your text </p>, columna 2 <p> your text </p>, que trabajó para mí.

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