Perché questo div/img non si concentra in IE8?

Ho una pagina di presentazione molto semplice che ho costruito centrando un div, l'ancora e l'immagine. Per qualche motivo non sarà centrato su IE8 (nessuna delle due modalità), e spero che qualcuno possa dirmi perché. Non ho avuto la possibilità di provarlo su altri browser IE. Ho provato questo in Chrome e FF3 dove funziona OK.Perché questo div/img non si concentra in IE8?

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Ho detto che era davvero semplice. :)

Grazie,

Brett

fonte

2009-05-03 Brettski

comunque non ha nulla a che fare con la versione di IE. Funziona allo stesso modo in tutti i IE-s – DaDa

è meglio usare doctype, metà dei bug saranno corretti – Mike

Vuoi veramente che la tua pagina funzioni in modalità "Quirks"?Il tuo HTML Centri bene una volta ho aggiunto DOCTYPE per forzare la modalità standard:

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

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

fonte

2009-05-03 05:16:09

buit-oxa, una risposta davvero interessante. Grazie. – Brettski

Doctype> quirks mode, any day. La modalità Quirks può differire da browser a browser, mentre la modalità standard è praticamente la stessa (sì, IE8 è conforme agli standard!) Tranne alcune piccole differenze. +1 –

Onestamente non ho mai sentito parlare di strane modalità prima, grazie molte per la risposta e per insegnarmi un po 'di più sulla mia attività. – Brettski

Aggiungere text-align:center al corpo. Dovrebbe farlo quando combinato con lo margin:0 auto sul div.

È possibile centrare senza utilizzare il text-align:center sul corpo avvolgendo l'intero contenuto della pagina in un contenitore a larghezza intera & quindi impostare text-align:center su quello pure.

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

(ho aggiunto il div container). Non cambia davvero nulla però ... solo un div extra. Hai ancora bisogno di tutte le stesse proprietà CSS.

fonte

2009-05-03 04:52:33 Bryan

Questo lo ha centrato in IE8, ma non capisco perché ne ho bisogno. Ho altri siti che usano il margine: 0 auto; centrare un div contenente – Brettski

Vecchio thread, ma io rispondo a questa risposta (e ANCHE quella comunemente accettata) semplicemente perché è stata questa risposta in particolare che mi ha ricordato di mettere il testo allineato: centro al corpo. ;-) –

probabilmente si desidera cambiare al seguente:

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Il text-align:center; viene spostato al corpo. Se vuoi inserire altro contenuto sinistro allineato all'interno del div #pageContainer, allora avrai bisogno di text-align:left; per quella classe. Questa è la soluzione che ho usato in alcuni siti web e sembra funzionare su tutti i browser (è ciò che Dreamweaver usa nei suoi template di partenza).

fonte

2009-05-03 04:56:50

cristo sa perché qualcuno ti ha votato perché questo è esattamente come centrare una pagina – wheresrhys

Dato che IE8 in realtà è conforme agli standard di questo livello, puoi effettivamente applicare la sepcificazione e gli standard. La proprietà text-align centra solo gli elementi a livello di linea e non quelli a livello di blocco, come DIV. text-align: center; in questo caso centrerà solo il * testo * all'interno del corpo, non gli elementi del contenitore. L'unica cosa di cui ha bisogno è un doctype, come afferma la risposta sopra. –

Il margine di auto sui lati del div lascia il browser per decidere dove va. Non c'è nulla che dice al browser che il div debba essere centrato nel corpo o allineato a sinistra oa destra. Quindi tocca al browser. Se aggiungi una direttiva al corpo, il tuo problema verrà risolto.

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Ho aggiunto un bordo 1px al div in modo da poter vedere cosa stava accadendo in modo più chiaro.

Stai abbandonando il browser perché è in modalità quirk. Per rimuovere quirks mode, aggiungere una definizione doctype verso l'alto, in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Ora sarete in grado di vedere il vostro centro div 300 px sulla pagina.

fonte

2009-05-03 05:02:24

I margini orizzontali automatici combinati con una larghezza impostata rappresentano il modo corretto per centrare gli elementi a livello di blocco. Pratica comune, provalo tu stesso :) –

PER GLI UTENTI Blueprint Questo ha spinto il mio guscio, fino a quando ho trovato questo post: problem with ie8 and blueprint Per farla breve, in te modifica del codice html della

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

per

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

saluti Alex

fonte

2009-09-11 23:24:26

-1

questo funziona per me su IE6,7,8, FF 3.6.3:

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

<div id="container"> 
     <div id="centered">content</div> 
    </div>

fonte

2010-04-06 16:16:19 ben

Non funziona ... – Philippe

Perché questo div/img non si concentra in IE8?

risposta

Problemi correlati