2009-02-11 19 views
5

Il seguente codice HTML sembra necessario in Firefox 2 & 3 e IE7. Il pulsante Left si trova sulla sinistra, il pulsante Right si trova sulla destra e il testo nel mezzo è ... al centro!Problema di layout IE6 - posizionamento assoluto

Tuttavia su IE6 il pulsante Left è disallineato - appare allineato al centro.

Qualcuno può suggerire perché ??

<!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"> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html> 

(ho usato lo strumento per sviluppatori di IE per cercare di analizzare e risolvere questo problema, senza alcun risultato ...)

risposta

14

Devi attivare la proprietà hasLayout (una cosa IE ...) di #footer. Larghezza e altezza lo attivano, se non si desidera impostare una larghezza o altezza, è possibile utilizzare la proprietà IE-solo zoom in CSS.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html> 

IIRC, in IE, elementi hanno due comportamenti di layout diversi, uno se hasLayout è true, e un altro se è false. Assicurandosi che sia impostato su true puoi risolvere molti problemi di layout strani come questo.

+0

Questo è piuttosto peverse! Grazie Jonas. Che funziona quasi perfettamente - sembra spingere la larghezza del mio div contenimento di un paio di pixel in IE6. –

+0

L'impostazione dello zoom cambierà il cursore. Potrebbe voler limitare questo a IE6 solo anteponendo un _ alla regola. –

+0

Non vedo alcun problema di modifica del cursore Bjorn –

0

I suoi elementi mobili/posizionati dovrebbero essere i primi in ordine prima il testo normalmente allineato. Non posizionarli nell'ordine in cui appaiono.

Inoltre, è possibile aggiungere un! Importante per aumentare la precedenza e utilizzare la barra degli strumenti di sviluppo IE di Microsoft per vedere quali regole hanno effetto. Qual è la larghezza dell'elemento genitore?

Sembra che dovrebbe funzionare solo se.

+0

Grazie, ma questo non sembra cambiare le cose. Inoltre questo farebbe casino per gli utenti che usano uno screen reader. –

2

Prova questa (perdonate lo stile in linea!)

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div> 
+0

Abbastanza eccellente - grazie AJM! Tuttavia, in IE6 ora c'è uno spazio di 20px tra il sinistro del pulsante Sinistra e il bordo del Footer ... –

0

ho intenzione di suggerire un po 'di una possibilità di vostro approccio e vedere se hai fortuna con questo:

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style> 

Poi nel codice HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div> 

Si potrebbe quindi avere per passare e dare loro dei margini per allinearli come li vuoi. Ciò non funzionerà per un layout fluido, a meno che tu non dia il piè di pagina o un contenitore all'interno del piè di pagina per questi oggetti a larghezza fissa.

+0

Non sembra funzionare affatto Ho paura Matt ... –

2

Come ha detto Jona.

In caso di dubbio, si consiglia di specificare una larghezza in modo esplicito, anche se non richiesto, e preferisco utilizzarlo su "zoom" poiché lo zoom non è stato progettato per risolvere il problema di layout. L'impostazione esplicita di una larghezza tuttavia non è sempre possibile, quindi lo "zoom" fa il trucco.

0

Un'altra opzione che ho trovato utile per gestire i tag div in posizione assoluta in ie6 consiste nell'aggiungere entrambi i valori left e right nel CSS.

È semplice matematica se conosci la larghezza delle immersioni con cui stai lavorando.

Sembra "pinzare" la casella di divisione in posizione.

Ho provato tutti gli altri suggerimenti che ho letto (incluso javascript per forzare ie6 a comportarsi come se fosse ie7 o ie8) ma non hanno funzionato.

La soluzione sopra ha fatto.

Buona fortuna!

Problemi correlati