Colonne CSS bug - 5 colonnes ne contenant que 4 (avec des images)

Question

J'essaye d'implémenter le example de Chris Coyier en utilisant des colonnes CSS pour créer une grille sensible d'images.

J'ai mis les fichiers de Chris sur mon serveur et tout semblait bien. La seule chose que j'ai changé était les images réelles. Maintenant, comme vous le voyez sur mon test page, il n'y a que 4 colonnes d'images au lieu des 5 spécifiées, en utilisant column-count:5;. La cinquième colonne est juste un espace sans contenu. Cela ne se produit que lorsque la fenêtre du navigateur est supérieure à 1200px. Lorsque la fenêtre du navigateur est inférieure à 1200px, les requêtes média entrent en jeu et diminuent le nombre de colonnes 4, 3, 2 et finalement 1. En d'autres termes, ce bogue survient uniquement lorsque le column-count: est 5 et plus

en FF 10, Chrome 17+ et Safari 5+.

Toute aide serait appréciée!

Voici le code HTML garni:

<section id="photos"> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     <img src="images/iso_o.jpg" alt="Isometric" /> 

     ...      

</section> 

Voici le CSS intact:

* { margin: 0; padding: 0; } 

#photos { 
    /* Prevent vertical gaps */ 
    line-height: 0; 

    -webkit-column-count: 5; 
    -webkit-column-gap: 0px; 
    -moz-column-count: 5; 
    -moz-column-gap:  0px; 
    column-count:   5; 
    column-gap:   0px; 

} 
#photos img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
} 

@media (max-width: 1200px) { 
    #photos { 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count:   4; 
    } 
} 
@media (max-width: 1000px) { 
    #photos { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count:   3; 
    } 
} 
@media (max-width: 800px) { 
    #photos { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count:   2; 
    } 
} 
@media (max-width: 400px) { 
    #photos { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count:   1; 
    } 
} 

Answer 1

Ok je une réponse, bien que ce soit une solution de contournement, pas une solution. J'ai changé les images de sorte que certains étaient 300px de hauteur et d'autres, 370px. Fondamentalement, j'ai varié la hauteur des images et gardé la même largeur de toutes les images, 300px. Donc, la réponse est de ne pas utiliser d'images carrées, ou si vous voulez utiliser toutes les images carrées, utilisez le nombre de colonnes: 4 au lieu de 5.

Si quelqu'un peut vous donner un aperçu de ce qui se passe, ce serait formidable.

Answer 2

Quand frappe mon navigateur 1219 px de large (au moins aussi Firesize me dit) je reçois 5 Col.. En dessous, j'en ai 4 aussi. Firefox 10.

Certaines choses qui peuvent se passer:

• Mon verticale est exactement scrollbar 19 px de large
• La frontière gauche et à droite de la fenêtre de Firefox sont 9 px chacun, ce qui 18px totale

Il semble presque que l'un d'entre eux soit inclus dans la requête média.

---

Edit: un peu bizarre cependant, parce qu'à première vue, le W3 media queries site semble suggérer que:

La fonction média « largeur » décrit la largeur de la zone d'affichage ciblée du dispositif de sortie. Pour les supports continus, ceci est la largeur de la zone de visualisation (telle que décrite par CSS2, section 9.1.1 [CSS21]) y compris la taille d'une barre de défilement rendu (le cas échéant)

Answer 3

Juste au cas où l'on trouve autre cela dans leur résultats de recherche, il est le fait que les images sont en ligne de sorte qu'ils ont un peu d'espace entre les voir:

How can I eliminate spacing between inline elements in CSS?

J'utilise la taille de la police: 0 sur la section pour résoudre ce problème :)