Perché questo div / img non sarà centrato in IE8?

StackOverflow https://stackoverflow.com/questions/816343

  •  03-07-2019
  •  | 
  •  

Domanda

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

<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

È stato utile?

Soluzione

Vuoi davvero che la tua pagina funzioni in modalità strane? Il tuo codice HTML va benissimo una volta 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>

Altri suggerimenti

Il margine di auto ai lati del div lascia al browser la possibilità di decidere dove va. Non c'è nulla che dica al browser che il div dovrebbe essere centrato nel corpo o allineato a sinistra oa destra. Quindi dipende dal browser. Se aggiungi una direttiva al corpo, il tuo problema sarà 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 più chiaramente.

Lo stai lasciando al browser perché è in modalità stranezze. Per rimuovere la modalità stranezze, aggiungi una definizione doctype in 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 potrai vedere il tuo div center di 300 px sulla pagina.

Aggiungi text-align: center al corpo. Questo dovrebbe farlo quando combinato con il margin: 0 auto sul div.

Puoi centrare senza usare text-align: center sul corpo avvolgendo l'intero contenuto della pagina in un contenitore a larghezza intera & amp; quindi impostando text-align: center anche su quello. 

<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 contenitore div). In realtà non cambia nulla ... solo un div extra. Hai ancora bisogno delle stesse proprietà CSS.

Probabilmente vuoi cambiarlo come segue: 

<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 sul corpo. Se vuoi inserire altro contenuto allineato a sinistra all'interno del div #pageContainer , allora avrai bisogno di text-align: left; per quella classe. Questa è la soluzione che ho usato in parecchi siti Web ora e sembra funzionare su tutti i browser (è ciò che Dreamweaver utilizza nei suoi modelli di avvio).

PER UTENTI BLUEPRINT Ciò mi ha fatto impazzire, fino a quando non ho trovato questo post: problema con ie8 e blueprint Per farla breve, nel tuo codice html cambia 

 <!--[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

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

    #container
    {
        width:100%;
    }

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

e 

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top