Tabella Safari / WebKit over-run quando si utilizza lo spazio bianco: nowrap

Question

Avere uno strano problema di rendering con Safari:

Ho un tavolo dentro un div. All'interno della tabella & Lt; td & Gt; Ho un sacco di div galleggiati a sinistra. Quindi il display normale è tutti i div all'interno del td impilati verso sinistra fino a riempire la larghezza, quindi scorrere alla riga successiva e così via. Quindi qualcosa del genere:

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

Funziona in tutti i browser tranne Safari / Webkit, dove finisce qualcosa del genere:

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

Aggiornamento: finalmente capito il problema: i miei div interni (il " XXX " s) avevano white-space: nowrap. Apparentemente il webkit non stava avvolgendo l'intero elenco di div invece di applicare il nowrap all'interno del div.

È stato uno schifo.

(Questo non aveva nulla a che fare con display: none)

Answer 1

Rispondere alla mia domanda:

Alla fine ho capito il problema: i miei div interni (i " XXX " s) avevano spazi bianchi: nowrap. Apparentemente il webkit non stava avvolgendo l'intero elenco di div invece di applicare il nowrap all'interno del div.

È stato uno schifo.

(Questo non aveva nulla a che fare con display: none)

Answer 2

In realtà, ho posto la mia domanda sopra separatamente, quindi ho trovato la soluzione come un ragazzino:

Invece di usare white-space: nowrap, in questo caso è più appropriato utilizzare display: inline-block.

Il CSS deve essere adattato qua e là per il cambiamento, ma funziona come previsto.

Gli elementi con nowrap si bloccano agli elementi adiacenti in WebKit