Переполнение таблицы Safari / WebKit при использовании пробелов:ловушка

Question

Возникла странная проблема с рендерингом в Safari:

У меня есть таблица внутри div.Внутри таблицы <td> У меня осталось много всплывающих элементов div.Таким образом, обычное отображение - это все div внутри td, расположенные слева до тех пор, пока они не заполнят всю ширину, затем переходят к следующей строке и так далее.Итак, что-то вроде этого:

|===========================|
|  |---------------------|  |
|  | XXX  XXX  XXX  XXX  |  |
|  | XXX  XXX            |  |
|  |                     |  |
|  |----------------------  |
|===========================|

Это работает во всех браузерах, кроме safari / webkit, где в итоге получается что-то вроде этого:

|===========================|
|  |-------------------------------|
|  | XXX  XXX  XXX  XXX  XXX  XXX  |
|  |                               |
|  |-------------------------------|
|===========================|

Обновить:Наконец-то разобрались с проблемой:мои внутренние дивы ("XXX"ы) имели white-space: nowrap.Очевидно, webkit не переносил весь список divs вместо применения nowrap внутри div.

Это была неприятная история.

(Это не имело никакого отношения к display: none)

Answer 1

Отвечаю на свой собственный вопрос:

Наконец-то разобрались с проблемой:в моих внутренних divs ("XXX"-х) были пробелы:новрап.Очевидно, webkit не переносил весь список divs вместо применения nowrap внутри div.

Это была неприятная история.

(Это не имело никакого отношения к display: none)

Answer 2

На самом деле, я задал свой вышеприведенный вопрос отдельно, а затем нашел решение, как большой мальчик:

Вместо использования пробела: nowrap , в этом случае более уместно использовать display:inline-block .

CSS нужно кое-где адаптировать для внесения изменений, но он работает так, как ожидалось.

Элементы с nowrap привязываются к соседним элементам в WebKit