iframe shimming ou ie6 (et ci-dessous) sélectionnez le bug de z-index

Question

Euh, je ne sais pas si quelqu'un a rencontré ce problème
une brève description est sur IE6 tout <select> les objets sont affichés sur n'importe quel autre élément, même les div...ce qui signifie que si vous avez un effet javascript sophistiqué qui affiche un div censé être au-dessus de tout (par exemple :lightbox, multibox etc.) en cliquant sur un certain élément et que div chevauche un <select> votre div doit être affiché comme s'il se trouvait sous le <select> [dans ce cas, un z-index maximum et minimum ne fonctionne pas]

J'ai essayé de chercher sur Google et j'ai trouvé la solution iframe shim
Mais je voulais des alternatives assez propres ou mieux encore, quelqu'un a-t-il trouvé une meilleure solution?puisque la méthode utilisant les iframes utilise environ 130 Mo de RAM pourrait ralentir les machines des pauvres

Answer 1

Vous n'avez pas besoin de cacher chaque select utilisation d'une boucle. Tout ce dont vous avez besoin est une règle CSS telle que:

* html .hideSelects select { visibility: hidden; }

Et le code JavaScript suivant:

//hide:
document.body.className +=' hideSelects'

//show:
document.body.className = document.body.className.replace(' hideSelects', '');

(Vous pouvez également utiliser votre implémentation préférée addClass / removeClass).

Answer 2

Il existe un plugin pour jquery appelé bgiframe cela rend la méthode iframe assez facile à mettre en œuvre.

Personnellement, en tant que développeur Web, j'en suis au point où je ne me soucie plus de l'expérience utilisateur dans IE6.Je vais faire en sorte que le rendu soit aussi proche que possible du "correct" et m'assurer qu'il est fonctionnel, mais en ce qui concerne la vitesse, tant pis.Ils peuvent se mettre à niveau.IE7 (bien qu'encore assez lent par rapport à tous les autres navigateurs) est disponible depuis 2 ans (presque jour pour jour !).IE8 va bientôt sortir.Firefox est disponible pour toutes les plateformes.Safari est également une option (et super rapide).Opera est disponible pour la plupart/toutes les plateformes.

IE6 est sorti il ​​y a plus de 7 ans.À mon humble avis, il n'y a aucune raison de continuer à l'utiliser, à part des utilisateurs paresseux et des services informatiques incompétents (ou si vous êtes un développeur Web).

Answer 3

au cas où quelqu'un serait intéressé, voici un code de shilling IE.

* html .shimmed {
    _azimuth: expression(
        this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
        'inherit');
}

ref: cet extrait par subtleGradient et ceci message de Zach Leatherman

Answer 4

Avant IE7, la liste déroulante était un & "fenêtré &"; control signifie qu'il a été rendu directement sous forme de contrôle par Windows plutôt que par le navigateur qui le synthétise. En tant que tel, il n’était pas possible de prendre en charge l’indexation z par rapport à d’autres contrôles synthétisés.

Pour apparaître par-dessus un DDL, vous devez utiliser un autre contrôle fenêtré, tel que IFRAME. Vous pouvez également utiliser une fonctionnalité peu connue d'IE, appelée window.createPopup (), qui crée essentiellement une fenêtre contextuelle sans chrome. Il a des limitations, comme le clic imparable, mais elles sont en fait plutôt utiles si vous construisez un système de menu à survol.

Answer 5

La solution la plus simple et la plus élégante à ce bogue IE irritant se trouve à l'adresse suivante: http: // docs. jquery.com/Plugins/bgiframe à l'aide de jQuery.

Je suis parvenu à cette conclusion après avoir essayé pendant 2 jours de le faire fonctionner avec WebSphere Portal / Portal Applications où tout est dynamique, y compris le menu déroulant.

Answer 6

Il y a aussi la méthode activex, que je commence à explorer. Cela nécessite la création de code conditionnel pour utiliser un contrôle activex au lieu d'une zone de sélection pour ie6. Un script de démonstration présentant la technique, qui est discuté plus en détail ici .

Mise à jour: il semble que MS Office soit requis pour que le contrôle active-x soit sur la machine de l'utilisateur. En théorie, il serait peut-être possible d'inclure cela quelque part, mais cela devient de plus en plus salissant.

Answer 7

Je sais que beaucoup de gens ont suggéré leurs propres astuces, mais dans mon cas, je me contente simplement de masquer la sélection en utilisant jquery comme ci-dessous.

$(':date').dateinput({
    format: 'dd/mm/yyyy',
    onBeforeShow: function(event) {
        $('select').hide();
    },
    onHide: function(event) {
        $('select').show();
    }
});