La columna CSS3 de Webkit agrega un relleno adicional a su contenedor.
He creado un diseño de múltiples columnas CSS3 para la galería de imágenes que se ve bien en Firefox.
HTML:<section id="featured">
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
css:
#featured {
width: 730px;
padding: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
-webkit-column-fill: balance;
-moz-column-count: 2;
-moz-column-gap: 10px;
-moz-column-fill: balance;
column-count: 2;
column-gap: 10px;
column-fill: balance;
background: #7d90a5;
}
article {
width: 300px;
display: block;
background: #344252;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 10px;
width: 335px;
margin-bottom: 20px;
}
article img{
width: 335px;
display: block;
}
El problema es que cuando uso el navegador Chrome para abrirlo, se agrega espacio adicional en la parte inferior del<section>
que no tengo ni idea de arreglarlo. He buscado en la web y encontré esto.hilo Pero no estoy seguro de si es el mismo problema.
Mira estoviolín enlace e intente abrir utilizando Chrome y Firefox.