Internet Explorer 6 e 7: gli elementi fluttuati si espandono al 100% quando contengono un elemento figlio flottato a destra. C'è una soluzione?

Ho un genitore div flottante a sinistra, con due figli div s che devo spostare a destra.Internet Explorer 6 e 7: gli elementi fluttuati si espandono al 100% quando contengono un elemento figlio flottato a destra. C'è una soluzione?

Il genitore div dovrebbe (se ho capito bene le specifiche) essere ampio quanto necessario per contenere il bambino div s, e questo è come si comporta in Firefox e altri.

In IE, la madre div si espande al 100% della larghezza. Questo sembra essere un problema con gli elementi fluttuanti che hanno i bambini galleggiati a destra. pagina di prova:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0;float:left;"> 
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div> 
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div> 
</div> 
</body> 

</html>

purtroppo non posso fissare la larghezza dei bambini div s, quindi non posso impostare una larghezza fissa sul genitore.

Esiste una soluzione alternativa CSS-solo a fare il genitore div larga quanto il bambino div s?

fonte

2009-05-12 Paul D. Waite

ecco un ottimo esempio di quale sia il problema: http://css-class.com/test/css/visformatting/floats/floats-width-auto.htm –

Ooh sì, buona pagina di test. –

Ecco una soluzione che rende inline-block lavoro su IE6 al http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ per rendere gli elementi di comportarsi più come diritto-galleggiava <div>s:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 

<title>Float with inline-block test</title> 

<style type="text/css"> 
    .container { 
     border-top: solid 10px green; 
     float: left; 
    } 

    .tester1, 
    .tester2 { 
     float: right; 
    } 

    .tester1 { 
     border-top: solid 10px blue; 
    } 

    .tester2 { 
     border-top: solid 10px purple; 
    } 
</style> 

<!--[if lte IE 7]> 
<style type="text/css"> 
    .container { 
     text-align: right; 
    } 

    .tester1, 
    .tester2 { 
     float: none; 
     zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */ 
    } 
</style> 
<![endif]--> 

</head> 

<body> 
<div class="container"> 
    <div class="tester1">Tester 1</div> 
    <div class="tester2">Tester 2</div> 
</div> 
</body> 
</html>

fonte

2010-05-04 06:21:44 cryo

Aha! Sì, ottima idea: "inline-block" è un'imitazione più ravvicinata dei galleggianti. Ci rimane ancora il problema degli ordini, ma a meno che non ci manchi qualcosa, non c'è modo di aggirarlo. Vincitore! –

Oh - anche io uso i commenti condizionali in modo che il codice per il fissaggio di IE 7 e 6 venga applicato solo in IE 7 e 6. Ho riscritto il tuo esempio di conseguenza. Questo evita problemi con 'inline-block' in Firefox 2, e significa che tutti gli IE dopo 7 ottengono il corretto codice basato sul' float'. –

Abbastanza corretto - Ho provato ad aggiungere 'float: right' ai DIV test e' inline-block' al contenitore ma non funzionava in IE6 - sembra che il corretto floating abbia reso gli elementi 100% width indipendentemente da cosa. Oh bene, almeno l'effetto è comunque possibile :-P – cryo

Non sono riuscito a trovare una soluzione solo CSS adatta alle proprie esigenze, ma se si desidera utilizzare una soluzione JavaScript, può essere utile il seguente codice? Non ho modificato lo stile delle div, ho solo aggiunto gli ID main, sub1 e sub2 ai tuoi div.

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth; 
document.getElementById('main').style.width = myWidth;

fonte

2009-05-12 10:49:02 Daan

Certo, dovrebbe funzionare JavaScript, anche se, se dovessi seguire la rotta JavaScript, probabilmente controllerei se lo script IE7 di Dean Edwards ha risolto questo particolare problema (risolve un sacco di altri). –

Cosa succede ad usare una tabella di cella singola al posto del div esterno? Potrebbe essere necessario un po 'più di lavoro per avere tutto allineato correttamente, ma la tabella non si espande.

fonte

2009-05-12 11:01:13

Sfortunatamente, il tavolo sembra forzare le div del bambino ad avvolgere, quindi sono sopra l'altro invece che da lato a lato. –

OK, che ne dici di tabelle annidate? Il tavolo esterno ha float: a sinistra e una cella. In quella cella c'è un tavolo interno con float: a destra e due celle. In ciascuna delle due celle c'è il contenuto delle tue due immersioni interne. È più complicato rispetto alle sole div, ma funziona (sul mio XP/IE7, almeno). –

Ah, realizza il layout orizzontale delle div al bambino con un tavolo. Sicuramente una possibilità, anche se tecnicamente non si intende utilizzare le tabelle per il layout (penso che si manchi una linea guida per l'accessibilità del contenuto Web se lo si fa). Inoltre, questo è in realtà per un sito che ha due layout: uno da sinistra a destra e uno da destra a sinistra. Idealmente non vogliamo modificare l'HTML per i layout (oltre ad avere una classe che indica quale layout è in uso), e l'uso di tabelle potrebbe porre fine a questo. –

Qualcosa si potrebbe iniziare con questo:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;"> 
<DIV style="BORDER: #00c 10px solid;FLOAT: right;"> 
Tester 1 
</DIV> 
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;"> 
Tester 2 
</DIV> 
</DIV>

Il risultato che sembra essere, almeno nel campo da baseball di quello che stai cercando. Ovviamente, vorresti modificarlo per le tue esigenze e probabilmente aggiungere qualche logica css per applicarlo solo al browser < IE 7.

Se questo non è esattamente quello che stai cercando, prova a giocare con alcuni margini negativi .

fonte

2009-05-13 16:24:31

Sfortunatamente non sembra funzionare sulla mia pagina di test: le div al bambino avvolgono, quindi sono l'una sopra l'altra invece di una parte all'altra. Inoltre, almeno in IE 7, il margine del 100% occupa tutto lo spazio disponibile, quindi il div principale è posizionato al di fuori del suo genitore. –

che cosa è con i cappucci? –

A volte IE 6 non sente correttamente a meno che non urli. –

In primo luogo, perché non stai usando gli stili in linea?

userei questo per indirizzare IE con un file CSS separato:

<!--[if lt IE 7]> 
<link rel="stylesheet" href="ie6.css" type="text/css" /> 
<![endif]-->

So che questo non è una domanda diretta, ma IE è sempre un dolore da affrontare! La maggior parte dei designer/sviluppatori che conosco creeranno un foglio di stile completamente nuovo per IE.

fonte

2009-05-14 23:19:56

Sì, mi spiace: il codice sopra è solo un esempio di codice per evidenziare il bug. Ho usato gli stili in linea per rendere leggermente più semplice vedere cosa sta succedendo. –

Mi è venuta una soluzione utilizzando text-align: right e display: inline.

Prova questo:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="margin-top: 10px; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div> 
    </div> 
</div>

Avviso ho dovuto cambiare l'ordine delle scatole "tester" nel codice di presentarsi nello stesso modo in cui il tuo esempio. Penso che ci sia un'alternativa quella margin-top sul nuovo contenitore, ma non ho tempo per guardare in questo momento.

Se si desidera uno stile più pulito per tutti gli altri browser provare questo:

<div style="border-top:solid 10px #0c0; float: left;"> 
    <div style="float: right;"> 
     <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div> 
     <div style="border-top:solid 10px #00c; float: left;">Tester 1</div> 
    </div> 
</div>

Ci sono alcuni problemi diversi che possono venire quando si vuole il layout roba in giro quelle scatole. Tuttavia, penso che questi problemi saranno molto più facili da risolvere rispetto a questo.

Spero che questo sia stato utile per voi.

fonte

2009-05-15 13:46:47 kaba

Si potrebbe voler usare 'inline-block' invece di' inline'. –

inline-block non funziona in ie6 – meo

@meo: no, non lo è, ma può essere emulato con alcune avvertenze: http://foohack.com/2007/11/cross-browser-support-for- inline-block-styling/ – cryo

Una soluzione molto hacky ma solo CSS che funziona bene in IE, chrome e FF.

Ho preso la soluzione di kaba - ma il problema era che funziona bene in IE, ma tutti gli altri browser mostrano uno spazio di 4px tra le due div. Lo spazio rimane come 4px anche se il contenuto di entrambe le unità si espande. Quindi per risolvere il problema ho usato le dichiarazioni condizionali di IE. Non sembro il miglior codice al mondo, ma ha il compito di farlo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title>Float test</title> 
</head> 

<body> 
<div style="border-top:solid 10px #0c0; float: left;"> 

    <div style="border-top:solid 10px #00c; text-align: right;"> 
     <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div> 

     <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px"> 

     <!--[if gte IE 5]> 
     <div style="border-top:solid 10px #00c; display: inline;margin-left:4px"> 
     <![endif]--> 

     Tester1 

     <!--[if gte IE 5]> 
     </div> 
     <![endif]--> 


     </div> 

    </div> 
</div> 
</body> 
</html>

fonte

2010-05-04 05:11:35 DMin

Vedo dove stai andando; Penso che preferisco la soluzione 'inline-block' per IE, anche se, trattandosi di un problema di spaziatura senza la necessità di margini negativi. –

Ho avuto lo stesso problema e risolto nel posizionando il bambino elemento (che volevo galleggiare a destra) con posizione: assoluta e destra: 0. Ho dato all'elemento genitore abbastanza spazio per fare spazio all'elemento figlio ... Vale la pena, potrebbe non funzionare per tutte le applicazioni!

fonte

2012-04-02 13:20:53 evilunix

Certo, questa è un'altra soluzione. Funziona bene se sai quanto sarà ampio l'elemento figlio. –

Internet Explorer 6 e 7: gli elementi fluttuati si espandono al 100% quando contengono un elemento figlio flottato a destra. C'è una soluzione?

risposta

Problemi correlati