Comment résoudre le sélectionner chevauchement bug dans IE6?

Question

Lors de l'utilisation de IE, vous ne pouvez pas mettre un positionnement absolu div sur une sélectionnez l'élément d'entrée.C'est parce que la sélectionner l'élément est considéré comme un objet ActiveX et il est sur le dessus de chaque élément HTML dans la page.

J'ai déjà vu des gens se cachant sélectionne lors de l'ouverture d'un popup div qui conduit à une assez mauvaise expérience utilisateur ayant les contrôles en train de disparaître.

FogBugz avait en fait une assez bonne solution (avant v6) de la transformation de la sélectionner dans les zones de texte lorsqu'une fenêtre est affichée.Cela a résolu le bug et a trompé les utilisateurs de l'œil, mais le comportement n'était pas parfait.

Une autre solution est dans FogBugz 6 où ils ne plus utiliser l'élément select et recodé partout.

Dernière solution que j'utilise actuellement est gâcher le moteur de rendu d'IE et de le forcer à rendre la position absolue <div> comme un ActiveX élément de trop, en s'assurant qu'il peut vivre plus d'un élément select.Ceci est réalisé en plaçant un invisible <iframe> à l'intérieur de la <div> et style avec:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Quelqu'un aurait-il une solution encore meilleure que celle-ci?

EDIT:Le but de cette question est d'autant instructif que c'est une vraie question.Je trouve l' <iframe> astuce pour être une bonne solution, mais je suis toujours à la recherche de l'amélioration, comme le retrait de ce laid inutile tag qui dégrade l'accessibilité.

Answer 1

Je ne sais rien de mieux qu'un Iframe

Mais il ne se produire pour moi que cela pourrait être ajouté en JS par la recherche d'un couple de variables

1. IE 6
2. Un grand Z-Index (vous avez tendance à avoir de définir un z-index si vous êtes un div flottant sur)
3. Un élément de boîte de

Puis un script qui ressemble à ces articles et juste ajouter un iframe couche serait une solution élégante

Paul

Answer 2

Merci pour l'iframe hack solution.C'est moche et pourtant, toujours élégant.:)

Juste un commentaire.Si vous arriver à être en cours d'exécution de votre site via le protocole SSL, le mannequin balise iframe doit avoir un src spécifié, sinon IE6 va se plaindre avec un avertissement de sécurité.

exemple:

    <iframe src="javascript:false;"></iframe>

J'ai vu certaines personnes recommandent de régler au src d'blank.html ...mais j'aime la façon javascript plus.Aller à la figure.

Answer 3

Autant que je sache, il y a seulement deux options, le mieux de ce qui est mentionné l'utilisation d'une iframe.L'autre est de cacher le tout sélectionne lors de la superposition est montré, conduisant à une encore plus étrange expérience de l'utilisateur.

Answer 4

essayer ce plugin http://docs.jquery.com/Plugins/bgiframe il devrait fonctionner!

utilisation: $('.your-dropdown-menu').bgiframe();

Answer 5

Je ne pense pas qu'il y est.J'ai essayé de résoudre ce problème à mon travail.Cacher le contrôle de sélection était le meilleur que nous pourrions présenter (le fait d'être une entreprise de la boutique avec un public captif, l'expérience utilisateur n'est généralement pas un facteur dans l'H de décisions).

De ce que j'ai pu recueillir en ligne lors de la recherche d'une solution, il n'y a juste pas de bonne solution pour cela.J'aime la FogBugz de la solution (la même chose fait par un grand nombre de haut-profil de sites, comme Facebook), et c'est effectivement ce que j'utilise dans mes propres projets.

Answer 6

Je fais la même chose avec une sélection de boîtes de et Flash.

Lors de l'utilisation d'une superposition, cacher les objets sous-jacents de pousser à travers.Ce n'est pas grand, mais il fonctionne.Vous pouvez utiliser JavaScript pour cacher les éléments juste avant l'affichage d'une superposition, puis leur montrer encore une fois que vous avez terminé.

J'essaie de ne pas salir avec des iframe, sauf si c'est absolument nécessaire.

L'astuce d'utiliser des étiquettes ou des zones de texte, au lieu de sélectionner les boîtes de cours de superpositions est soignée.Je peut l'utiliser dans l'avenir.

Answer 7

Mootools est très bien heshed solution à l'aide d'un iframe, appelé iframeshim.

Pas la peine, y compris la lib juste pour cela, mais si vous l'avez dans votre projet de toute façon, vous devez être conscient que le "iframeshim' plugin existe.

Answer 8

Il y a cette simple jquery plugin appelé bgiframe.Le développeur l'a créé dans le seul but de résoudre ce problème dans ie6.

J'ai récemment utilisé et il fonctionne comme un charme.

Answer 9

Lorsque vous masquez la sélection des éléments les cacher par la définition de la "visibilité:caché" au lieu de la manifestation:nul sinon le navigateur de ré-écoulement du document.

Answer 10

J'ai corrigé cela en cachant la sélection des composants à l'aide de CSS lorsqu'une boîte de dialogue ou de superposition est affiché:

sélectionne[i].style.visibilité = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}