La tabla Safari / WebKit se superpone al usar espacios en blanco: nowrap

Question

Tener un extraño problema de renderizado con Safari:

Tengo una tabla dentro de un div. Dentro de la mesa & Lt; td & Gt; Me quedan muchos div's flotantes. Entonces, la visualización normal es todas las divisiones dentro del td apiladas a la izquierda hasta que llenen el ancho, luego fluyen a la siguiente línea, y así sucesivamente. Entonces algo como esto:

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

Eso funciona en todos los navegadores, excepto safari / webkit, donde termina así:

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

Actualización: Finalmente descubrí el problema: mis divs internos (" XXX " s) tenían white-space: nowrap. Aparentemente, webkit no envolvía la lista completa de divs en lugar de aplicar el nowrap dentro del div.

Esa fue desagradable.

(Esto no tenía nada que ver con display: none)

Answer 1

Respondiendo mi propia pregunta:

Finalmente descubrí el problema: mis divs internos (" XXX " s) tenían espacio en blanco: nowrap. Aparentemente, webkit no envolvía toda la lista de divs en lugar de aplicar el nowrap dentro del div.

Esa fue desagradable.

(Esto no tenía nada que ver con display: none)

Answer 2

En realidad, hice mi pregunta anterior por separado, luego encontré la solución como un niño grande:

En lugar de utilizar espacios en blanco: nowrap, en este caso es más apropiado usar display: inline-block.

El CSS debe adaptarse aquí y allá para el cambio, pero funciona como se esperaba.

Los elementos con nowrap se atascan a elementos adyacentes en WebKit