web-dev-qa-db-fra.com

100% de largeur est plus grande que la division du parent

Je travaille sur le thème vBulletin, mais sur la liste des fils, chaque fil a 100% pour sa largeur mais les fils sont également plus gros que leurs parents, mais quand j'enlève la bordure des fils, ils conviendront à la div des parents :). alors pensez que ce problème est aux frontières.

Vous pouvez le voir mieux sur jsfiddle (le fil est de forme blanche avec une bordure noire)

<body>
   <div class="after-body">
        <div class="body-wrapper">
             <div class="threadlist">
                    <ol class="threads">
                        <li class="threadbit"><div class="thread"></div></li>
                        <li class="threadbit"><div class="thread"></div></li>
                    </ol>
             </div>
        </div>
   </div>
</body>
htmlcsswidth
24
AmirHosein KazemNejad

Le problème ici est que le width est une taille de la zone intérieure avec du texte, et le remplissage avec bordure est "enveloppé" autour de lui. Cette spécification n'a aucun sens, mais la plupart des navigateurs modernes la suivent.

Votre sauveur s'appelle box-sizing: border-box;.

.threadbit .thread {

    /* ... some stuff ... */

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Regardez ici: jsFiddle

Plus d'informations sur cette propriété ici et ici .

54
MightyPork

Oui, vous avez raison, les bordures repoussent la "largeur" ​​de l'élément. C'est la valeur par défaut box-sizing des navigateurs modernes. Cela peut être modifié dans la plupart des cas avec une déclaration comme:

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Notez qu'il n'est pas pris en charge sous IE8, donc en fonction de ce que vous faites et du support que vous souhaitez, vous devrez peut-être trouver une solution ou une conception alternative.

[~ # ~] modifier [~ # ~]

Cela fait un moment que ma réponse d'origine et la prise en charge du navigateur ont légèrement changé. Firefox 29, Chrome 10, Safari 5.1 et Internet Explorer 8 et versions ultérieures prennent tous en charge box-sizing non préfixé mais il existe quelques problèmes connus dans certaines versions.

La liste complète/à jour est disponible sur caniuse.com mais voici quelques-unes que j'ai trouvées importantes sur le site:

  • IE8: ignore box-sizing: border-box si min/max-largeur/hauteur est utilisé
  • IE8: le min-width la propriété s'applique à content-box même si box-sizing est réglé sur border-box
  • IE9: la largeur de la barre de défilement est soustraite de la largeur de l'élément lorsqu'elle est définie sur position: absolute et soit overflow: auto ou overflow-y: scroll

À mesure que la part de marché d'IE8 et d'IE9 diminue, ces problèmes et les autres répertoriés sur caniuse seront moins problématiques à l'avenir.

3
Turnerj

Rappelez-vous toujours lorsque vous rencontrez des problèmes liés aux dimensions de vérification de la largeur de l'élément via le modèle de boîte de l'outil de développement Firefox ou de la boîte de métrique de Chrome. C'est toujours une bonne idée d'inclure

  *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
     }

Assurez-vous également de vérifier la propriété d'affichage. Si un élément est affiché en ligne, il ne prendra pas de valeurs de largeur, de marge et de remplissage et s'il est affiché en tant que bloc en ligne, il prendra la largeur, la marge et le remplissage.

Voici un lien pour la propriété de dimensionnement de la boîte http://www.paulirish.com/2012/box-sizing-border-box-ftw/

1
Vinod S Pattar