Absolument positionné DIV incohérent entre les navigateurs

Question

J'ai un problème avec un DIV positionné de manière absolue - il ne se trouve pas exactement au même endroit dans les navigateurs. Le problème est que la plupart de mon contenu est généré par un fichier JSP et je dois appliquer le CSS et créer mon contenu dans un CMS, en dehors de ce fichier. Voici comment le code est structuré:

   <div id="automatic-container"> 
       <div class="one"> 
       <div class="oneWeird"></div> 
       <div id="content-container"> 
        <div id="some-content1"></div> 
        <div id="some-content2"></div> 
       </div> 
       <div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div> 
       </div> 
       </div> 

Tout autre que le conteneur de contenu est automatiquement généré par un fichier JSP. Le contenu de la div "absolute-position" doit être placé au-dessus du contenu dans "conteneur de contenu" et assis à un endroit spécifique. oneWeird est un div créé par le JSP qui semble ne servir à rien que je peux dire ...

J'ai appliqué le CSS suivant et la position absolue DIV est désactivée de quelques pixels dans tous les navigateurs (j'ai vérifié Chrome, IE7,8,9, FF, Safari). Il correspond à Chrome, Safari & IE8. En FF, il est environ 3 pixels plus haut, IE 9 il est 5 pixels plus haut, et dans IE7 il est tombé d'environ 10 pixels.

   #automatic-container{position: relative; padding: 0px; margin: 0px auto;} 
       #automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;} 
       #automatic-container div.one div.oneWeird{display: none;} 
       #content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;} 
       #some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;} 
       #some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;} 
       #absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;} 

Toutes les idées sur la façon d'obtenir la position absolue DIV cohérente entre les différents navigateurs? Aucun des articles que j'ai trouvé sur SO ou ailleurs n'a été utile. J'ai essayé de changer le positionnement en relatif et en utilisant z-index, mais cela a également produit des résultats incohérents. Mon code est propre lorsque je l'exécute également via la validation en ligne.

Merci d'avance pour toute aide.

Answer 1

Appliquez une réinitialisation: http://meyerweb.com/eric/tools/css/reset/ ou Normalize.css http://necolas.github.com/normalize.css/ à vos pages avant d'appliquer votre css normal. Je suis presque sûr de ce que vous utilisez contre les différents styles par défaut que les différents navigateurs utilisent. Qu'est-ce qu'une réinitialisation est de définir tous les styles à une ligne de base avant de commencer à appliquer vos propres styles. Donc, si Chrome applique x quantité de marge à un élément et IE applique Y montant, la réinitialisation les met tous les deux à 0. L'inconvénient est que chaque élément que vous utilisez doit être redéfini. Par exemple, les listes n'ont plus de style par défaut, ni de guillemets, etc.

Normalize.css est un peu plus facile à utiliser pour les débutants, car il définit des styles de base pour tout ce qui ressemble à une réinitialisation, mais il donne un style à la plupart des choses. plutôt que de simplement les mettre à 0, vos listes seront toujours indentées avec une balle mais elles seront identiques sur tous les navigateurs (ou devraient l'être.)