min-height / min-width berücksichtigt in einigen Browsern nicht die Boxgröße

Siehe dieses Beispiel: Ссылка

Ich habe ein 250x250px übergeordnetes div mit overflow: auto; erstellt, so dass Bildlaufleisten erscheinen, wenn der Inhalt die Box überläuft. Ich habe einen blauen Hintergrund gesetzt, um zu verdeutlichen, wenn der Elternteil sichtbar ist.

Innerhalb des Elternteils befindet sich ein Kindteil mit rotem Hintergrund für Sichtbarkeit. Es hat 8px schwarze Ränder und box-sizing: border-box; , so dass Füll- und Umrandungen in der Berechnung der Größe der Box enthalten sind. Das untergeordnete div wird auf min-height: 100% und min-width: 100% festgelegt.

Erwartetes Ergebnis: Untergeordnetes div sollte genau die gleiche Größe wie das übergeordnete Element haben, sodass kein Blau angezeigt wird und keine Bildlaufleisten angezeigt werden. Die berechnete Boxgröße (Inhalt + Füllung + Rahmen) sollte 250x250px sein. Es sollte 8px schwarze Ränder geben, die dies einbetten und eine 234x234px rote Region hinterlassen.

Funktioniert mit:

• Midori 4.1 Ubuntu
• Chrom 16 Ubuntu
• Opera 11.61 Ubuntu

Probleme mit:

• IE 8 WinXP: Horizontale und vertikale Bildlaufleisten werden angezeigt. Der Inhalt ist 249x266px mit 8px borderes und ergibt eine berechnete Boxgröße von 265x282px .

• Firefox 3.6 WinXP: Die vertikale Bildlaufleiste erscheint. Der Inhalt ist 217x250px und die berechnete Boxgröße ist 233x266px .

• Firefox 10 Ubuntu: Die vertikale Bildlaufleiste erscheint, der Inhalt ist 221x250px , die berechnete Boxgröße ist 237x266px .

Ich habe caniuse.com überprüft und es scheint, dass zumindest die fraglichen Browser die erforderlichen min-height , min-width und box-sizing unterstützen. Was gibt?

Lösung: Wie Marat vorgeschlagen hat, ist dies in der Tat ein Browser-Bug. Ich habe eine Problemumgehung mit JavaScript behoben, um Padding / Ränder hinzuzufügen, um Unterschiede in offsetWidth / Height zu korrigieren. Sehen Sie es hier: Ссылка