¿Por qué utilizar columnas de CSS3 en Chrome elimina los números de artículos en las listas

Question

me di cuenta de que el cromo estaba borrando el número en mi lista de artículos cuando agrego css para manipular la columna de recuento ...

Por ejemplo:

<ol style =-webkit-column-count: 2;..."> 
    .... 
</ol> 

Lo anterior se las arregla para desbordar los li's en una columna separada como se esperaba, pero también elimina la numeración predeterminada de los elementos. Esto no ocurre en Firefox, solo en Chrome.

¿Alguna idea?

Answer 1

Siempre puede arrojar un <div> alrededor del <ol> y dar el <div> columnas múltiples en lugar del <ol>.

<div style = -webkit-column-count: 2;...><ol> 
    .... 
</ol></div> 

Cuando hago eso, sin embargo, que terminan con la segunda columna de ser una línea más alta que la primera columna por alguna razón. También solo sucede en Chrome.

Editar: Solución al problema anterior era sólo para añadir un margen cero para la <ol>, así que esto debería funcionar bien:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;> 
    .... 
</ol></div> 

Por extraño que parezca, tener un poco de relleno en el <ol> parece deshacerse de la números también, así que si tiene relleno en alguna parte podría ser el culpable.

Answer 2

Parece que los números están ocultos. Esto se puede resolver mediante el uso de la siguiente propiedad:

OL { 
    list-style-position: inside; 
} 

Answer 3

A menudo uno de hoja de estilos tendría un reinicio html, entre los cuales hay un reinicio padding: 0; de elementos de la lista.

mientras que el siguiente, por Stéphane funciona como un encanto,

ul { 
    list-style-position: inside; 
} 

también se puede dar a su lista de artículos padding-left:

padding-left: 16px; 

Answer 4

Para algunos estilos de lista razón posicionados fuera del elemento (valor predeterminado) están ocultos cuando aplica la regla column-width. El siguiente es lo mejor que pude encontrar para tratar de emular el comportamiento 'esperado' en Chrome basado en las otras respuestas y mi propia experimentación.

Demo

HTML

<div class="col-wrapper"> 
    <ol> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
    </ol> 
</div> 

CSS

.col-wrapper { 
    -moz-column-width: 200px; 
    -moz-column-gap: 1em; 
    -webkit-column-width: 200px; 
    -webkit-column-gap: 1em; 
    column-width: 200px; 
    column-gap: 1em; 

    /* (optional) use ol's margin here */ 
    margin-top: 16px; 
} 

.col-wrapper ol { 
    /* clear top margin of ol */ 
    margin-top: 0; 
}