Interruzione di riga inaspettata di Firefox utilizzando float e overflow nascosti

Ho un contenitore div che contiene due elementi: uno .button e uno .box con testo all'interno. .button arriva prima ed è a destra. .box non ha float [questo è un vincolo: non riesco a farlo fluttuare a causa di altre strutture simili che dipendono dal fatto che non ci sia float]. .box ha overflow: hidden; per stabilire un nuovo contesto di formattazione del blocco. Ciò consente a .box di includere "il 100% fino a" dell'elemento float precedente, .button.Interruzione di riga inaspettata di Firefox utilizzando float e overflow nascosti

.outer-container ospita tutto questo ed è a destra.

http://jsfiddle.net/6qAwA/5/

In Chrome (26.0.1410.12 beta-m PC, Mac 25.0.1364.99), Safari (6.0.2 Mac), e IE8-9, questo agirà in un modo desiderato. Il testo di .box rimane su una riga e, a causa della virgola mobile di .outer-container, sarà esattamente la dimensione che deve essere. In Firefox, tuttavia, il testo è suddiviso in un'altra riga.

trovo anche un problema simile quando .button è invece galleggiava a sinistra - ricevo il comportamento desiderato in tutto tranne che per Firefox.

Ho visto questo Firefox 16.0.1 e 19.0 per PC e 18.0.1 e 19.0 per Mac. è un insetto?

fonte

2013-02-27 Chris

Aggiungi display: inline-block;-.box:

Demo

fonte

2013-02-27 01:32:32 Adrift

Questo funziona esattamente allo scopo del Fiddle originale, ma sfortunatamente non è esattamente quello che sto cercando, dal momento che ho bisogno di "contenitori esterni" per essere un po 'più flessibili. Se il '.outer-container' non è stato flottato, il' .box' dovrebbe ancora "100% fino a" il precedente elemento flottato a causa di "overflow: hidden;", mentre l'intera cosa si estende al 100%. [imgur] (http://i.imgur.com/MLtLMjp.png), [nuovo Fiddle senza blocco inline] (http://jsfiddle.net/6qAwA/11/) – Chris

Capito .. Suppongo che nel caso di avere un '.box', posso incontrarlo nel mezzo e usare un selettore più specifico per aggiungere' display: inline-block; '. [nuovo Fiddle] (http://jsfiddle.net/6qAwA/16/). È comunque strano, e non so che questa correzione faccia sembrare il problema un bug in FF. – Chris

In realtà, quando si sta andando per una soluzione come http://jsfiddle.net/Volker_E/x5rPd/ non è necessario un secondo div per il comportamento desiderato.

fonte

2013-02-27 02:16:17

Questo ha anche senso per il problema originale, ma per gli scopi del progetto su cui sto lavorando, è richiesto quell'elemento a livello di blocco. – Chris

mi sono imbattuto in questo problema oggi dove la nodo galleggiante si rompono la linea solo in Firefox anche dopo aver impostato la sua display-inline-block e la ragione di ciò è che il nodo contenitore aveva un'impostazione di stile di white-space insieme a nowrap . Pertanto, la reimpostazione del valore di white-space su normal nel nodo del contenitore ha risolto il problema.

fonte

2013-08-07 11:02:43

Questo ha funzionato per me: l'elemento contenitore era un pulsante e impostandolo su 'white-space: normal' ha risolto il problema. Grazie! –

Works. Ma perché? soprattutto dal momento che sembra pazzo che nowrap lo faccia avvolgere sulla riga successiva ... –

Se hai bisogno di 'nowrap' per il tuo contenitore, allora ti suggerisco questa soluzione: http://stackoverflow.com/a/26306907/2550529 – SepehrM

white-space: normal non ha fatto il trucco per me. Ciò che funzionava era white-space: nowrap; sul contenitore di testo diretto.

fonte

2014-07-30 12:20:53 montagproject

Interruzione di riga inaspettata di Firefox utilizzando float e overflow nascosti

risposta

Problemi correlati