Dzięki naszemu projektowi potrzebujemy wielu kolumn, aby wyświetlać tytuły z wielokropkiem, których nie oczekuję, że będą wielką sprawą, ale kiedy są zagnieżdżone wewnątrz display: table, obliczenia wydają się niepoprawne.Dlaczego obliczenia szerokości bez opasania zmieniają się, gdy są zagnieżdżone w elemencie z wyświetlaniem tabeli?
Ograniczenia wymagają elastycznego układu, dlatego potrzebne są procentowe szerokości (ustalone szerokości rozwiązałyby problem). A nasze układy wymagają display: table dużo dalej w górę drzewa i nie mogę go usunąć bez głównego reaktora.
Jeśli usuniesz wyświetlacz wszystko działa jak bym się spodziewał:
Ale mając tego wyświetlacza powoduje rodzica, aby uwzględnić elementy podrzędne całkowita szerokość wstępnie obcięty (ale z nowrap brane pod konto). To tak, jakby początkowe renderowanie odbywało się bez definiowania przepełnienia i dodaje je po fakcie (ale w tym punkcie obliczenie szerokości jest zbyt duże).
mogę domyślać się, dlaczego renderowania łamie, ale chciałbym bardziej ostateczną odpowiedź na temat, w jaki sposób przeglądarka renderuje to ... (Testowany w Chrome/FF/Safari na Mac)
To trochę nieładne, zagnieżdżasz element blokowy (ul) wewnątrz elementu wbudowanego (zakres) i używasz tabeli wyświetlania bezpośrednio w czymś, co wyświetla komórkę tabeli (niestandardowe, więc ostateczne renderowanie przeglądarki staje się nieprzewidywalne), bez używanie tabeli-wiersza ... Czy możesz wyjaśnić, czego naprawdę potrzebujesz? – coma
Powyższy przykład nie jest związany z moim kodem; Po prostu użyłem kilku elementów, aby zademonstrować zachowanie, które widzę (zamiast definiować rozdanie pełne klas). 'display: table' został pierwotnie dodany, więc wiele kolumn kończyłoby się z tą samą dynamiczną wysokością (bez js). W każdym razie to, czego chcę, to zrozumieć, dlaczego mamy takie zachowanie wokół nowrap (nie szukam "jak zrobić html wyglądać jak mój screen-shot", mogę to zrobić). Również nie spodziewałbym się, że mój wiersz będzie działał na moim przykładzie, ponieważ nie sądzę, że wpłynęłoby to na obliczenia szerokości (ale było trochę niechlujstwa, aby go pominąć). – SciSpear
Zachowuje się tak samo we wszystkich przeglądarkach, więc uważam, że jest to zachowanie przewidywalne (i oczekiwany schemat). Domyślam się, że po prostu nie wiem wystarczająco dużo o niższych poziomach cykli malowania/układu przeglądarki, aby zrozumieć wynik. – SciSpear