IE CSS Bug - Comment puis-je maintenir un position:absolute lorsque javascript dynamiques de contenu sur la page change

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

Question

J'ai une page où il y a une colonne et d'un contenu de la div, un peu comme ceci:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

Avec un certain style j'ai une image qui est partagé entre la colonne et le contenu, mais les besoins pour maintenir la même position verticale, de sorte qu'il s'aligne.

Le style est similaire à ceci:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

Cela fonctionne très bien lorsque le contenu en #content est chargé dynamiquement avant le rendu.Cela fonctionne également bien dans firefox toujours.Cependant, dans IE6 et IE7 si j'utilise javascript pour modifier le contenu (et donc de la hauteur) #content, les images n'ont plus de ligne jusqu' (#column ne bouge pas).Si j'utilise IE Developer Bar pour mettre à jour la div (dire ajouter des position:absolute manuellement), l'image saute et s'aligne à nouveau.

Est-il quelque chose qui me manque ici?

@Ricky - Hmm, cela signifie que dans ce cas il n'y a pas de solution, je pense.À son meilleur, il y aura un jaggedy match par la suite, mais comme mon contenu se dilate et se contracte etc.masquage/affichage ne fonctionne pas pour être pratique.Encore merci de répondre avec la meilleure solution.

Était-ce utile?

La solution

Ses un bug dans le moteur de rendu.Je rencontre tout le temps.Une façon de le résoudre est de masquer et d'afficher la div à chaque fois que vous modifiez le contenu (qui à son tour modifie la hauteur):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

J'espère que cela se passe assez vite qu'il n'est pas perceptible :)

Autres conseils

Une autre solution qui a fonctionné pour moi et n'avait pas de scintillement qui a pour effet d'ajouter et de supprimer un mannequin nom de classe CSS, comme ceci à l'aide de jQuery:

$(element).toggleClass('damn-you-ie')

Si vous êtes inquiet au sujet de l'obtention d'un clignotement de l'affichage et le masquage divCol vous pouvez adapter une autre propriété css et il aura le même effet par exemple

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top