Przepełnienie komórki tabeli CSS jest ignorowane przez FF i Operę

Question

Oct 08, 2012, 11:06 AM

Przepełnienie komórki tabeli CSS jest ignorowane przez FF i Operę

Mam tabelę CSS z trzema wierszami, która jest zagnieżdżona w div o stałym rozmiarze. Tabela ma trzy wiersze, wysokość pierwszych dwóch wierszy jest zdefiniowana przez zawartość (nie mogę podać żadnych wyraźnych rozmiarów), a ostatni wiersz po prostu bierze to, co zostało. Ostatni wiersz ma jedno dziecko, które jest div, ma mnóstwo dziecidivs zdisplay: inline-block. Mam problem - I div jest zawsze przepełniony i chcę, aby wyświetlał pionowy pasek przewijania, który występuje tylko wChromium. FF i Opera po prostu ignorująoverflow-y:scroll i pozwól, aby zawartość się wyczerpała (wierzę, że IE jest tym samym, czego po prostu nie mam). Zastanawiam się, czy problem można rozwiązać bez użycia javascript, a jeśli tak, to w jaki sposób.

Nie mam nic przeciwko używaniuHTML5 tylko rozwiązanie, o ile jest obsługiwane przez najnowsze wersje wszystkich przeglądarek.

Aktualizacja 1 - Chciałem to wyjaśnić - nie mogę używać jednoznacznych rozmiarów dla żadnego z wierszy, ponieważ obsługują one kontrolki o nieznanej wysokości.

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="height: inherit; overflow-y: scroll">
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>