padding-bottom jest ignorowany w Firefoksie i IE na przepełnionych elementach bez zawartości
To pytanie dotyczy tych 2:
1css - zastosowanie dopełnienia do pola za pomocą przewijania, dolne wypełnienie nie działa
2.Dolne wypełnienie nie działa na elemencie overflow w przeglądarkach innych niż chrom
Ale nie znalazłem nigdzie, dlaczego tak się dzieje, co oznacza, że w Chrome (31) i Operze (18) pojawia się dopełnienie, aw Firefoksie (26) i IE (9-10) tak się nie dzieje.
Oto mój przypadek testowy:
http://jsfiddle.net/eW39h/4/
Prostszy przykład z powiązanego pytania nr 1:
http://jsfiddle.net/rwgZu/
<div id="container">
<div id="innerBox"></div>
</div>
#container {
padding: 3em;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
}
#innerBox{
height: 400px;
background: #000;
}
Naprawdę nie szukam poprawki, ale aby zrozumieć, jaka jest poprawna implementacja (i które przeglądarki źle to zrozumiały :-)).
EDYTOWAĆ 18 grudnia 2013 r
Opierając się na odpowiedzi Marca Audeta, zagłębiłem się w specyfikacje i zrobiłem nowy przypadek testowy.
http://jsfiddle.net/rwgZu/79/
Widać tutaj, że wszystkie przeglądarki zamykają przepełnione pole w tym samym punkcie, który jest krawędzią dopełniającą ”, co jest rzeczywiście zgodne ze specyfikacją:
Gdy wystąpi przepełnienie, właściwość „overflow” określa, czy skrzynka jest przycięta do krawędzi dopełnienia
A mimo to w Chrome jest dodatkowe wypełnienie po wewnętrznym pudełku.
Interesujące jest jednak to, że dodanie przepełnionej zawartości w wewnętrznym polu prowadzi do ujednoliconych wyników we wszystkich przeglądarkach:
http://jsfiddle.net/uPY8j/1/
Nie mogłem znaleźć w specyfikacji zasad dla tego typu warunków, więc pozostawiam pytanie na razie otwarte.