Textarea dans IE7 disparaît au passage de la souris

Question

J'ai ce type de page contenant beaucoup de données, un type de tableau avec des divs. Chaque ligne a des sous-liens qui peuvent être basculés ouverts / fermés. Le basculement est déclenché à l'aide des paramètres de visibilité css. Chaque " cellule " de la table a une petite image dans son coin, vous cliquez sur l’image et une fenêtre contextuelle s’ouvre pour vous permettre de mettre des notes sur l’entrée.

Cette fenêtre contextuelle comporte une zone de texte et un ensemble de cases à cocher, ainsi qu’un bouton (type d’entrée = soumettre, je pense). Le popup est un iframe imbriqué dans un div caché.

Dans IE7, une fois que vous avez ouvert cette note et ouvrez-la, faites-la glisser sur la zone de texte de la fenêtre pour la faire disparaître et afficher le contenu de la page en dessous. Les cases à cocher indiquent également la page ci-dessous lorsque vous passez la souris.

J'ai donc essayé plusieurs correctifs. J'espérais pouvoir utiliser cet index pour résoudre ce problème. pas de chance. Je pourrais essayer de remplacer la zone de texte par un type d’entrée = texte mais, étant donné que les cases à cocher présentent également ce bogue, je soupçonne que la saisie de texte sur une ligne sera également à l’origine du bogue.

Answer 1

en plus de bloquer les éléments, l’indice z fonctionne pour tous les éléments qui ont ce que l’on appelle IE hasLayout en savoir plus

Answer 2

Le moyen le plus simple de déclencher hasLayout (mentionné dans un autre article) consiste à ajouter zoom: 1 .

Lors du débogage de certains des problèmes d'affichage les plus stupides d'IE 6/7, je vais parfois vider un fichier temporaire

* {
    zoom: 1;
}

à mon CSS et voir si quelque chose change. Si c'est le cas, je commence à l'ajouter de manière sélective aux éléments en commençant par l'élément, le parent / enfants de l'élément, etc.

zoom est uniquement pris en charge par IE. Il est donc très "Safe". avoir dans votre document. Cela vous évite également de faire des choses folles comme des éléments de positionnement absolus, etc.

Answer 3

Si je me souviens bien, Z-Index ne fonctionne que sur des éléments de bloc absolument positionnés. Essayez donc de définir la position de la boîte contextuelle sur absolue, puis essayez le z-index. Si vous souhaitez que le menu contextuel se trouve dans une certaine position, définissez l'élément d'habillage sur la position relative. J'ai déjà rencontré ce problème auparavant et je crois l'avoir résolu exactement comme je l'ai décrit.

Answer 4

J'ai eu exactement le même problème avec les champs de saisie et les zones de texte dans IE7, mais uniquement si je leur ai donné une largeur.

Je ne me souviens pas d’où je l’ai tirée, mais j’ai trouvé cette solution, elle n’est peut-être pas très élégante, mais le problème a été résolu. Ajoutez simplement:

filter:alpha(opacity=100)

à votre attribut css of style des champs problématiques.