Come risolvere il posizionamento assoluto in IE8?

In ogni browser che ho utilizzato, ad eccezione di ie8, un elemento posizionato in modo assoluto può essere posizionato in base al genitore più vicino con posizionamento relativo.Come risolvere il posizionamento assoluto in IE8?

Il codice seguente mostra due div all'interno di una tabella. Il div superiore ha posizione: relativo, tuttavia, l'elemento nidificato e posizionato in modo assoluto non rispetta i suoi limiti (in ie8, viene posizionato nella parte inferiore della pagina anziché nella parte inferiore del div principale).

Qualcuno sa una correzione per questo?

<style> 
#top { 
position: relative; 
background-color: #ccc; 
} 
#position_me { 
background-color: green; 
position: absolute; 
bottom: 0; 
} 
#bottom { 
background-color: blue; 
height: 100px; 
} 
</style> 
<table> 
    <tr> 
    <td><div id="top"> Div with id="top" 
     <div id="position_me"> Div with id="position me" </div> 
     </div> 
     <div id="bottom"> Div with id="bottom" 
     <p>Lorem ipsum dolor sit amet.</p> 
     </div></td> 
    </tr> 
</table>

fonte

2009-09-01 edt

Dichiarare un doctype. Ti suggerisco di utilizzare il doctype HTML5:

<!DOCTYPE html>

fonte

2009-09-01 01:20:23 Sampson

Questo è perché non stai utilizzando il tipo di documento. E IE funziona su "quircks" mode.

Prova questa doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

fonte

2009-09-01 01:27:39 Sergei

Aggiungi questa:

#top { 
//height: 100%; 
} 
#position_me { 
//left: 0; 
}

Costringe IE8 per calcolare la posizione corretta in quirks mode. Ci sono molti modi per farlo:

//zoom: 1; 
//writing-mode: tb-rl;

vedere http://haslayout.net/haslayout

fonte

2010-01-28 16:12:49 yakunins

È inoltre possibile utilizzare

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

Questo risolto il mio problema!

fonte

2011-12-11 21:53:48 Hanno

utilizzo sempre il doctype HTML5, ma nel mio caso l'unico problema era che l'elemento padre aveva bisogno di "posizione: relativo;" appositamente impostato. dopo, ha funzionato perfettamente.

fonte

2013-04-24 14:48:11 luschn

Risposta corretta! – leymannx

Come risolvere il posizionamento assoluto in IE8?

risposta

Problemi correlati