Pourquoi ce div / img ne se concentre-t-il pas dans IE8?

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

  •  03-07-2019
  •  | 
  •  

Question

J'ai créé une page de maintien très simple centrée sur un div, une ancre et une image. Pour une raison quelconque, il ne sera pas centré sur IE8 (quel que soit le mode) et j'espère que quelqu'un pourra me dire pourquoi. Je n'ai pas eu l'occasion de l'essayer dans d'autres navigateurs IE. J'ai essayé ceci dans Chrome et FF3 où cela fonctionne bien. 

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

J'ai dit que c'était vraiment simple. :)

Merci,

Brett

Était-ce utile?

La solution

Voulez-vous vraiment que votre page fonctionne en mode quirks? Vos centres HTML fonctionnent bien une fois que j’ai ajouté doctype pour forcer le mode 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>

Autres conseils

La marge de auto sur les côtés du div laisse au navigateur le soin de décider où il va. Rien n'indique au navigateur que la div doit être centrée dans le corps, ou alignée à gauche ou à droite. Donc, c'est au navigateur de décider. Si vous ajoutez une directive au corps, votre problème sera résolu. 

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

J'ai ajouté une bordure de 1 pixel à la div pour que vous puissiez voir ce qui se passait plus clairement.

Vous laissez cela au navigateur car il est en mode quirks. Pour supprimer le mode quirks, ajoutez une définition de doctype en haut, comme suit: 

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

Vous pourrez maintenant voir votre centre div 300 px sur la page.

Ajoutez text-align: center au corps. Cela devrait le faire en combinaison avec la marge: 0 auto sur le div.

Vous pouvez centrer sans utiliser text-align: center sur le corps en encapsulant tout le contenu de la page dans un conteneur pleine largeur & amp; puis en définissant text-align: center sur celui-ci également. 

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

(J'ai ajouté le div conteneur ). Cela ne change rien, cependant… juste une div supplémentaire. Vous avez toujours besoin des mêmes propriétés CSS.

Vous souhaitez probablement le modifier comme suit: 

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

Le text-align: center; est déplacé vers le corps. Si vous souhaitez placer un autre contenu aligné à gauche dans le div #pageContainer , vous aurez besoin de text-align: left; pour cette classe. C’est la solution que j’ai utilisée dans bon nombre de sites Web et qui semble fonctionner avec tous les navigateurs (c’est ce que Dreamweaver utilise dans ses modèles de départ).

POUR LES UTILISATEURS DE BLUEPRINT Cela a conduit mes noix, jusqu'à ce que j'ai trouvé ce post: problème avec ie8 et blueprint Longue histoire courte, en vous code HTML changer le 

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

pour 

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

Cordialement Alex

Cela fonctionne pour moi sur IE6,7,8, FF 3.6.3: 

    #container
    {
        width:100%;
    }

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

et 

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top