8
votes

IE8 ne prenant pas d'élément absolument positionné hors de flux

J'ai donc rencontré un bug que je ne peux pas comprendre dans IE8. J'ai vu des vioëfies, mais celle-ci pourrait prendre le gâteau.

J'ai essayé de le reproduire dans Codepen, mais nous avons beaucoup de code pour cela, je vais donc essayer d'inclure les styles calculés de IE8.

Utilisation de la Fondation 5, j'ai une barre supérieure qui commence à ressembler à ceci:

 Avant

 après

La liste déroulante est positionnée absolument, Donc, cela ne devrait évidemment pas étirer le conteneur parent. Cela n'étente pas le parent, mais le grand-parent. Voici le balisage: xxx

le CSS calculé de IE8: xxx

si vous avez besoin Plus d'informations laissez-moi savoir. Merci d'avance.

Pour référence, je teste sur un VM Parallels de Win7 avec IE8 avec IE8, en utilisant le mode document IE8 et les normes IE8.


14 commentaires

IE8 n'est pas pris en charge dans la Fondation 5 sur tout fondation.zurb.com/docs/compatibility.html < / a> et n'a qu'un support partiel dans F4 fondation.zurb.com/ DOCS / V / 4.3.2 / Support.html Si vous souhaitez une assistance complète IE8 Utilisez F3. Aussi Stackoverflow.com/questions/tagged/...


Je suis au courant de cela et j'ai résolu la plupart des choses qui n'ont pas fonctionné. C'est une question très spécifique sur un problème très spécifique.


J'ai vu une tentative de fabrication de F5 IE8 compatible sans la partie JS comme celle-ci fondation.zurb.com/forum/posts/241-foundation-5-and-ie8 Mais il n'est pas clair à quel point cette solution est fiable et il est difficile de déterminer si vous avez résolu la plupart d'entre eux ou juste certains.


Je sais tout cela, le problème n'est pas fondé, c'est très spécifiquement un problème avec CSS et IE8. Je n'ai pas besoin d'aide avec la fondation, j'ai besoin d'aide avec ce menu déroulant ne pas être sorti de la circulation.


Votre HTML

5 Réponses :


0
votes

Avez-vous un lien pour voir ceci? Je me demande si vous devriez peut-être définir le relatif UL pour positionner. Je pense que le LI tombe sur le premier article relativement positionné. Espère que cela aide.


2 commentaires

Je suis désolé je ne le fais pas. Même s'il tombait au premier article relativement positionné, il ne devrait toujours pas rester dans le flux.


Avez-vous un lien pour voir ceci?



0
votes

Si l'un des éléments parents de l'élément absolu a la position: le rapport absolu est calculé par rapport à cela,

Essayez de supprimer la position: par rapport aux conteneurs parent peut-être peut-être aider

Assurez-vous également que vous avez raison xxx

au début de votre fichier


1 commentaires

Peu importe quel élément a la position: relative dessus, il ne devrait pas élargir un élément contenant. Position: Absolute est censé prendre l'élément hors du flux, de sorte que son parent ne doit donc pas être en expansion, quel que soit l'élément qui se positionné.



0
votes

Ce n'est pas une erreur de rendu IE8, mais une erreur de codage / incompatibilité quelque part. Ce code de démonstration montre que IE8 prend des éléments déroulants absolument positionnés hors du flux: xxx

.
Je n'ai pas fait de démo en direct car Jsfiddle, Jsbin et les goûts ne fonctionnent pas dans IE8, mais je l'ai testé dans un mode réel IE8 et IE9 en mode IE8.

Comme dans le code fourni de la question ne contient pas de CSS : HOVER Déclaration d'état, l'erreur de codage / incompatibilité peut mentir dans le JavaScript qui conduirait l'état de navigation.


0 commentaires

0
votes

Votre liste déroulante a une largeur maximale de 200px. IE8 ne traite pas bien avec Max-largeur. Essentiellement, il est traité comme une déclaration de largeur. Votre forçage d'une largeur de 200px dans IE8. Vous auriez besoin de le définir sur None ...

max-width:none\9; /* IE8 */


0 commentaires

0
votes

Je ne pense pas que ce "bogue" a quelque chose à voir avec la position: absolu; ne pas prendre le .dropdown hors du flux. Li.HAS-Dropdown a également un état .hover lui appliqué. Il y a probablement un autre style appliqué à Li.HAS-Dropdown causant # Global-Nav. Peut-être qu'un rembourrage supplémentaire est appliqué à Li.HAS-Dropdown. Malheureusement, nous n'avons pas tout le code pour déboguer correctement.


0 commentaires