Esiste un modo di larghezza 0 per impedire il collasso dei div flottati

Question

Innanzitutto, questo problema non riguarda il collasso degli elementi di blocco quando i loro figli sono mobili. In effetti il ??problema non ha nulla a che fare con la compensazione.

Il problema è questo. Supponiamo che io abbia una serie di div fluttuati come:

<div class="column">Column 1</div>
<div class="column"></div>
<div class="column">Column 3</div>

Con css:

div.column { float: left; width: 200px; }

La colonna centrale verrà chiusa nelle ultime versioni di Firefox e Safari, sebbene apparentemente non IE7. Quello che voglio è il comportamento di IE7.

Mi rendo conto di poter aggiungere un & amp; nbsp; e manterrà il div aperto, ma in questo caso per me non funziona perché ho anche una dichiarazione come questa:

div.column input { width: 100% }

Ho una serie di colonne disposte in un formato simile a una tabella, con alcune condizioni che fanno scomparire i campi di input. Il problema è quando l'input scompare il campo collassa. Se aggiungo un & amp; nbsp; , il div si avvolge. Solo per evitare le domande iniziali:

• Perché non uso una tabella? Perché sto usando Scriptaculous Sortable per trascinare e rilasciare le righe, che non funziona con le tabelle
• Perché non utilizzo una larghezza di pixel più breve per lasciare spazio a un & amp; nbsp; ? perché width: 100% è più accurato su tutti i browser.
• Perché non aggiungo un & amp; nbsp; quando nascondo l'input potrei finire per ricorrere a questo, ma sarebbe un po 'brutto nel JS, quindi spero in un modo migliore.

Qualcuno ha degli hack intelligenti qui? Dato che sia Safari che Firefox si comportano in questo modo, suppongo che si tratti di un comportamento ufficialmente sanzionato. Dove viene discusso nelle specifiche del W3C?

Answer 1

Eh? Non dovresti dargli un'altezza casuale? Puoi mostrare una demo?