100 % Breite ist größer als das Div des übergeordneten Elements

Question 1

Ich arbeite am vBulletin-Theme, aber in der Thread-Liste hat jeder Thread 100 % für seine Breite, aber Threads sind auch größer als ihre Eltern, aber wenn ich den Rand von Threads entferne, passen sie in das div der Eltern :). Denken Sie also, dass dieses Problem an Grenzen liegt.

Das sieht man besser auf jsfiddle (Faden ist weiße Form mit schwarzem Rand)

<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>

Question 2

Das Problem dabei ist, dass die width ist eine Größe des inneren Bereichs mit Text, und die Polsterung mit Rand wird darum “gewickelt”. Diese Spezifikation macht keinen Sinn, aber die meisten modernen Browser folgen ihr.

Dein Retter wird gerufen 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+ */
}

Schau hier: jsFiddle

Weitere Informationen zu diesem Objekt hier und hier.

Question 3

Ja, Sie haben Recht, die Ränder schieben die “Breite” des Elements heraus. Dies ist die Standardeinstellung Box-Größe moderner Browser. Dies kann in den meisten Fällen mit einer Deklaration wie der folgenden geändert werden:

.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+ */
}

Beachten Sie, dass es unter IE8 nicht unterstützt wird. Je nachdem, was Sie erstellen und welche Unterstützung Sie wünschen, müssen Sie möglicherweise eine alternative Lösung oder ein alternatives Design finden.

BEARBEITEN

Es ist schon eine Weile her, dass sich meine ursprüngliche Antwort und die Browserunterstützung geringfügig geändert haben. Firefox 29, Chrome 10, Safari 5.1 und Internet Explorer 8 und höher werden alle unterstützt box-sizing ohne Präfix, es gibt jedoch einige bekannte Probleme von bestimmten Versionen.

Die vollständige/aktuelle Liste ist verfügbar unter caniuse.com Hier sind jedoch einige, die ich auf der Website für wichtig halte:

IE8: ignoriert box-sizing: border-box wenn min/max-Breite/Höhe verwendet wird

IE8: die min-width Eigentum gilt content-box selbst wenn box-sizing ist eingestellt auf border-box
IE9: Die Breite der Bildlaufleiste wird von der Breite des Elements abgezogen, wenn auf eingestellt ist position: absolute und entweder overflow: auto oder overflow-y: scroll

Da der Marktanteil für IE8 und IE9 sinkt, werden diese und die anderen auf caniuse gelisteten Probleme in Zukunft weniger ein Thema sein.

Question 4

Denken Sie immer daran, wenn Sie auf Probleme im Zusammenhang mit der Breitenprüfung der Abmessungen des Elements durch das Boxmodell aus dem Firefox-Entwicklertool oder aus der Metrix-Box von Chrome stoßen. Es ist immer eine gute Idee, es aufzunehmen

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

Stellen Sie außerdem sicher, dass Sie die Anzeigeeigenschaften überprüfen. Wenn ein Element inline angezeigt wird, nimmt es keine Werte für Breite, Rand und Auffüllung an, und wenn es als Inline-Block angezeigt wird, nimmt es Breite, Rand und Auffüllung an.

Hier ist ein Link für die Box-Sizing-Eigenschaft http://www.paulirish.com/2012/box-sizing-border-box-ftw/