Dans le CSS, pourquoi la combinaison de “float: left; display:table; marge: x” sur plusieurs éléments rendent la diminution des marges?

À travailler sur une mise en page, j'ai décidé de tenter combinant un flotteur de mise en page pour les grandes colonnes d'une table avec une mise en page pour les sous-éléments. Ainsi, mon code html/css de balisage a été le long de ces lignes:

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS:

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

Spécifiques largeurs et les marges ne sont pas critiques. Voir cette jsFiddle pour un exemple de référence.

Ce que j'ai vu passer, c'est que chaque bloc de colonnes, de gauche à droite sur la page, s'était légèrement plus petite des marges que le dernier. Comme aucun autre balisage ou CSS était présent pour ce faire, j'ai été confondu. Après avoir joué avec des valeurs différentes, j'ai découvert qu'en commentant display: table causé le comportement normal je m'attendais, par exemple, la constante des largeurs de colonne.

Maintenant, je peux utiliser d'autres méthodes pour obtenir la mise en page que je veux, ce n'est pas un problème; mais je suis vraiment curieux de savoir pourquoi ce qui se passe. Toutes les pensées?

MODIFIER

Il semble que ce est une webkit bug. display: table avec flotteur et les marges fonctionne très bien dans Firefox. Toutes les suggestions sur un correctif pour webkit pour la postérité?

MODIFIER

Je viens de tester dans Safari et il semble fonctionner. WTF Chrome??

Montage Final

Après avoir testé dans Firefox 18, Safari et Chrome Canary (en plus de la norme de Chrome), il apparaît que c'est en fait un Chrome bug spécifique.

La meilleure solution est d'ajouter un supplémentaire simple wrapper div à l'intérieur de chacun de ceux flottait à contenir le contenu et les wrappers' CSS pour width: 100%; height:100%; display: table;, puis retirez le display: table à partir de l'extérieur des éléments de flottaison. Fonctionne comme un charme.

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS:

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}
Ce n'est pas censé arriver. Ressemble à un autre WebKit bug si vous me demandez.
Yep, ressemble à WebKit - fonctionne comme prévu dans FireFox.
lol à la poursuite de votre edit - je ne peux pas trouver quelque chose dans les Chrome issue tracker pour ce comportement particulier, mais Chrome est un buggy navigateur, 'nuff said.
ouvert le numéro code.google.com/p/chromium/issues/detail?id=363954
fixe en bêta 35.0.1916.114 et canaries 37.0.1992.1

OriginalL'auteur Ken Bellows | 2013-02-18

  1. 7

    Cela ne devrait pas arriver. Marges horizontales sur le bloc au niveau des tables doit être calculée de la même manière qu'avec tout autre bloc-niveau de non-remplacement d'éléments, comme décrit dans la section 10.3.3 du CSS2.1 spec, indépendamment de table algorithme de mise en page est utilisé. En particulier, les pourcentages de valeurs pour les marges devrait être calculé en fonction de la largeur du bloc contenant de l'élément que vous affichez comme un tableau; depuis tous vos éléments sont des frères et sœurs qui partagent la même mère et le même pourcentage de la marge de valeur, ils doivent être équidistants tant qu'ils sont flottants bloc de boîtes.

    Dans tous les navigateurs, sauf Google Chrome, les éléments sont équidistants, comme prévu. Donc, ma meilleure supposition est que c'est un autre Chrome bug.

    Si vous commentez la display: table déclaration qui, comme vous le dites à l'origine du comportement de retour à la normale — les navigateurs continue de générer des anonymes bloc de boîtes de la table dans votre flotte à contenir les cellules de la table. Cette ne devrait pas nuire à la mise en page, mais si elle le fait, je ne peux pas en dire plus car je ne suis pas intimement familier avec la façon de disposition de table de fonctionnement en termes de CSS.

    Un commentaire rapide, à l'aide de display: table-cell sur des éléments enfants ne semble pas générer la structure de la table ci-dessus. Pour l'un, l'alignement fonctionne correctement. Pour un autre, à l'aide d'une table normale-les propriétés de la cellule, tels que vertical-algin: middle, ne fonctionne pas avec juste display: table-cell, mais t travail quand display: table est ajouté à la mère (bien que l'alignement se détraque encore).
    Hmm, si vous utilisez display: table-row à la place? Je ne suis pas intimement familier avec le fonctionnement interne de CSS disposition de table de sorte à ce point, je suis juste jeter des idées.

    OriginalL'auteur BoltClock