min-height/min-width nie przestrzega box-zaklejanie w niektórych przeglądarkach

Zobacz ten przykład: http://jsfiddle.net/vrgT3/5/min-height/min-width nie przestrzega box-zaklejanie w niektórych przeglądarkach

zrobiłem div 250x250px rodzica z overflow: auto; więc pojawiają się paski przewijania, gdy zawartość przelewa okno. Ustawiłem niebieskie tło, aby było jasne, kiedy rodzic jest widoczny.

Wewnątrz elementu nadrzędnego znajduje się element podrzędny z czerwonym tłem dla widoczności. Ma on czarne obramowania 8px i box-sizing: border-box;, więc dopełnienie i margines są uwzględniane przy obliczaniu rozmiaru pudełka. Element div dziecka ma wartość min-height: 100% i min-width: 100%.

Oczekiwany wynik: Dziecko div powinny być dokładnie taki sam rozmiar jak rodzic, więc nie jest pokazana i błękit pojawiają się żadne paski przewijania. Rozmiar wyliczonego pola (treść + dopełnienie + granice) powinien wynosić 250x250px. Powinny to być czarne obramowania 8px, pozostawiając czerwony obszar 234x234px.

Działa z:

Midori 4,1 Ubuntu
Chromium 16 Ubuntu
Opera 11.61 Ubuntu

Problemy z:

IE 8 WinXP: Pojawiają się paski przewijania w poziomie i pionie. Zawartość to 249x266px z granicami 8px, co daje obliczoną wielkość pudełka 265x282px.
Firefox 3.6 WinXP: pojawia się pionowy pasek przewijania. Treść to 217x250px, a obliczony rozmiar pudełka to 233x266px.
Firefox 10 Ubuntu: pojawia się pionowy pasek przewijania, treść: 221x250px, rozmiar pola obliczonego to 237x266px.

Sprawdziłem caniuse.com i wydaje się, że przynajmniej w kwestii przeglądarek obsługuje wymaganego min-height, min-width i box-sizing. Co daje?

Jak zasugerował Marat, jest to rzeczywiście błąd przeglądarki. Rozwiązałem obejście wykorzystujące JavaScript, aby dodać dopełnienie/marginesy w celu skorygowania różnic w przesunięcie szerokości/wysokości. Zobacz tutaj: http://jsfiddle.net/vrgT3/8/

Źródło

2012-02-29 kueblc

IE8 ma od dawna znane problemy z minimalną/maksymalną szerokością/wysokością i przepełnieniem; rozmiar skrzynki nie ma znaczenia. Co do innych ... – BoltClock

Dzięki za szybką reakcję! Próbowałem usunąć właściwość 'overflow' (wracając do' overflow: visible') i nadal otrzymuję niepoprawne rozmiary zarówno w IE, jak i FF.Celem 'box-sizing' jest uwzględnienie dużych ramek w' min- *: 100% '. Działa to zgodnie z oczekiwaniami w przypadku Midori, Opery i Chromium. – kueblc

Zobacz także http://css-tricks.com/box-sizing/ (sekcja "Min/Max" poniżej sekcji "Pomoc techniczna") –

To jest niefortunny błąd przeglądarki Firefox (patrz bug 308801) i IE8 (IE9 działa poprawnie).

Błąd został naprawiony w przeglądarce Firefox 17+.

Źródło

2012-03-01 12:01:51

Ach tak jest. Ale poważnie, jesteśmy w Firefox 10 z prawie 7-letnimi błędami? Jakieś znane rozwiązania? – kueblc

Obejście polega na użyciu dodatkowego opakowania. A następnie ustaw 'border' i' padding' dla bloku potomnego bez 'min-height' i ustaw' min-height' dla bloku rodzica bloku potomnego. –

Nawiasem mówiąc, jeśli błąd jest dla ciebie ważny, rozważ głosowanie nad jego poprawieniem na stronie błędu. Im więcej głosów ma błąd, tym większa szansa, że wkrótce zostanie naprawiony. Na przykład w przypadku błędu [401322] (https://bugzilla.mozilla.org/show_bug.cgi?id=401322) wystarczyło 96 głosów na błąd, aby uzyskać wysoki priorytet, i zostało to naprawione dość szybko (~ 3,5 miesiąca po zgłoszeniu). –

min-height/min-width nie przestrzega box-zaklejanie w niektórych przeglądarkach

Odpowiedz

Powiązane problemy