Float: le div right appaiono sulla riga successiva in IE solo

Ok, quindi sto lavorando a un prototipo della mia interfaccia utente prima di iniziare a codificare la webapp. Ho realizzato il design principalmente mentre lavoravo in Firefox e (ovviamente) quando l'ho testato in IE, c'erano molti problemi di rendering. Uno di questi problemi è che se ho un div che contiene del testo e un altro div che è impostato su float: a destra, il div nidificato appare sulla riga successiva, al di sotto della sua div genitore. Questo è il markup problema nella sua forma più semplice ...Float: le div right appaiono sulla riga successiva in IE solo

<div style="background-color:red;"> 
    Text 
    <div style="background-color:yellow; float:right;">Right</div> 
</div>

ho raschiato l'Internet per le soluzioni e la soluzione rilevante solo di lavoro ho scoperto che fa questo lavoro in IE è quello di posizionare il div galleggiante all'inizio della sua genitore come questo ...

<div style="background-color:red;"> 
    <div style="background-color:yellow; float:right;">Right</div> 
    Text 
</div>

In realtà, il div nidificato ha una classe e il mio CSS galleggia quella classe. Ma cosa succede se alla fine faccio un altro foglio di stile per il targeting dei dispositivi mobili e non voglio più che il div interno sia flottato? Quindi il contenuto stesso sarebbe fuori uso in HTML, solo per il gusto di risolvere un problema CSS in IE. C'è un modo migliore per risolvere questo?

fonte

2010-11-21 spaaarky21

Stai utilizzando un doctype? – Rob

Sì, – spaaarky21

@ scintillante, stai pulendo i galleggianti una volta che hai finito, chiaro: a sinistra o chiaro: entrambi. più ho un altro suggerimento perché hai un testo e un altro div all'interno di un div, questo non è il modo in cui i div sono codificati. – kobe

Un mio collega ha avuto di recente un problema molto simile. Ho raccomandato semplicemente di usare il posizionamento piuttosto che il floating. Credo che si possa fare lo stesso qui:

<div style="background-color:red; position:relative;"> 
    Text 
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div> 
</div>

Non so se si ha l'obbligo di utilizzare i galleggianti o meno. L'uso del metodo di posizionamento farà sì che l'elemento posizionato non occupi spazio nel flusso normale, ma altrimenti manterrà l'ordine sorgente corretto e realizzerà visivamente ciò che penso che tu voglia fare.

fonte

2010-11-21 19:28:21

È così semplice che è geniale! Anche se aggiungerò l'avvertenza che il posizionamento assoluto è relativo al primo antenato con posizionamento non statico (il default). Nella mia applicazione, il div esterno non è all'inizio della pagina, quindi quando applico il posizionamento assoluto al div interno , in realtà si è spostato in alto a destra della pagina. Quindi, per aggirare ciò, ho aggiunto il posizionamento relativo al genitore senza specificare a sinistra o in alto. Funziona perfettamente in IE, FF e Safari. Grazie mille! – spaaarky21

Aspetta un minuto, potrei aver parlato troppo presto. A differenza del floating div, il posizionamento consente assolutamente di sovrapporre gli altri bambini del contenitore. – spaaarky21

Potrebbe essere possibile correggere il nuovo problema regolando lo z-index. Qualche possibilità di pubblicare un esempio di codice più completo? –

non sono sicuro se si tratta di una possibilità per voi, ma mettere il testo all'interno del div esterno in un div propria sembra risolvere il problema

<div style="background-color:red;"> 
    <div style="float: left;">Text</div> 
    <div style="background-color:yellow; float:right;">Right</div> 
</div>

fonte

2010-11-21 17:16:03

Grazie per il suggerimento. L'ho provato ma mi sta causando due problemi. Per prima cosa, il div esterno è effettivamente colorato nella mia applicazione. Sarà una barra di navigazione primitiva e se faccio galleggiare entrambi i suoi figli, il div esterno collasserà fino a un'altezza di 0 px. Potrei impostare l'altezza ma questo problema di "wrapping floats" sta accadendo in altri posti dove il contenuto si avvolge e non posso impostare un'altezza. Il secondo problema è che c'è anche un logo da un altro div che è flottato a sinistra. Il modo in cui è ora, quel logo sposta "Testo", ma se lo faccio fluttuare a sinistra, si sovrappongono. – spaaarky21

@spaarky, se si tratta di un problema di wrapping, è possibile utilizzare una delle proprietà di overflow – kobe

@gov Non sono particolarmente familiare con i CSS, quindi scusami se mi manca qualcosa ma non si verificherà un overflow cambia semplicemente il comportamento quando overflow accadere? Quello che mi piacerebbe fare è prevenire l'overflow in primo luogo e fare in modo che quel bambino non divida in IE. – spaaarky21

Impostare un valore di larghezza sul tuo div interno e falla visualizzare: blocco in linea. I Div sono elementi di blocco che occupano il 100% della larghezza del genitore, ecco perché IE lo mette sulla riga successiva.

fonte

2010-11-21 17:26:25 ZippyV

Nessuna fortuna in IE 8 con

Right

. – spaaarky21

Questo in realtà mi ha aiutato. Il trucco è definire le larghezze per tutti gli elementi flottati. È noioso, ma hey, cosa ti aspetti da IE? – rgin

Ho appena colpito questo problema in IE7 - nel mio caso, l'elemento che stava per cancellare il galleggiante sarebbe stato comunque a tutta larghezza. L'ho appena impostato su "float: none; clear: left" e sembra funzionare.

fonte

2012-05-23 22:03:21

Float: le div right appaiono sulla riga successiva in IE solo

risposta

Problemi correlati