Curseur de sélection de texte CSS ie7, comportement étrange

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

  •  06-07-2019
  •  | 
  •  

Question

Etrange, ici, dans l’espoir d’obtenir quelques commentaires pour me diriger dans la bonne direction.

Si aucune couleur d'arrière-plan n'est appliquée à mon #wrapper ou à l'une des divs enfants, ie7 modifie le pointeur "normal". placez le curseur sur un " sélection de texte " lorsque vous déplacez la souris sur la page (avec ou sans souris).

Je pensais avoir résolu le problème il y a un moment, mais lorsque je supprime la couleur de fond de mon #wrapper ou de l'un des div de l'enfant, le problème réapparaît.

Je cherche seulement des indices ou ce que je devrais vérifier. 

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

EDIT:

Cela semble être dû au fait que les divs "hasLayout", mais je ne sais toujours pas comment le réparer. Voir ce lien.

EDIT 2:

Je ne trouve pas plus d'informations sur ce bogue "ie7". Toute personne qui a des idées, ou même si vous êtes au courant de ce bogue et que vous pouvez simplement me le faire savoir, je sais que je ne suis pas folle. Je suis encore très frustré par Microsoft. Déjà coûté quelques heures de travail supplémentaires cette semaine. On dirait que ça ne finit jamais.

EDIT 3:

Voici un autre lien . de quelqu'un ayant le même problème.

EDIT 4:

STACKOVERFLOW.com souffre de ce bug! Il en va de même pour mashable.com . Je garantis que de nombreux développeurs Web ont ce bogue sur leur site et qu’ils ne le savent même pas.

Vérifiez-le par vous-même ... déplacez votre curseur sur la page de l'un ou l'autre site. Notez qu’il devient un curseur de sélection de texte alors que ce n’est pas le cas.

On dirait qu'il serait facile de résoudre le problème avec la propriété curseur , mais le problème serait de déclencher le comportement correct du curseur de sélection de texte lorsque requis.

Était-ce utile?

La solution

Est-il trop compliqué d’énoncer explicitement quel curseur doit aller où? 

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

etc ..

Autres conseils

Je suis à peu près sûr de l'avoir rencontré auparavant, mais c'est probablement un peu trop subtil pour être vraiment remarqué lors de tests superficiels sur des navigateurs. Mais des problèmes ont également été résolus en définissant une couleur d'arrière-plan.

Autant que je sache, le meilleur moyen de résoudre ce problème consiste à positionner l'élément à l'origine du problème ou à ajouter un div d'emballage placé autour de celui-ci. Vous utiliseriez très probablement position: relative , bien que absolu et fixe devrait également fonctionner.

Le positionnement de l'élément lui-même fonctionne généralement, mais l'ajout d'un div wrapper peut fonctionner de manière plus cohérente.

E.g. l'ajout de position: relative à la classe .post-text fixe le curseur sur les questions et les réponses de cette page.

Le format 1x1 px GIF transparent fonctionne et constitue également un excellent correctif pour This et d'autres bogues dans IE 6 à 8. J'ajouterais quelque chose comme ceci à mes commentaires conditionnels pour tous les IE: 

* {
    background: url('images/fix1.gif');
}

Avez-vous essayé de définir explicitement background-color: transparent; ? Est-ce que cela vous aide?

Cela peut sembler être un vilain piratage, mais avez-vous déjà essayé de définir un GIF 1x1 px transparent comme arrière-plan?

Ce n'est pas parfait, mais pour ce petit exemple, il semble fonctionner pour IE 7. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

Je ne sais pas pourquoi cela semble fonctionner, et ce n'est certainement pas idéal. Pour une raison quelconque, le fait de placer l’élément p dans une div en ligne relativement positionnée fait en sorte que le curseur de la souris se comporte plus comme je l’attendais.

Je ne suis pas sûr que cela fonctionne dans un sens plus large, même s'il existe une hiérarchie d'éléments.

Je réalise que ce n'est pas une réponse parfaite, mais cela pourrait susciter d'autres idées.

La solution de Delilah, à peine simplifiée, fonctionne très bien pour moi et résout également le problème de mercator. 

div { cursor: default; }
div * { cursor: auto; }

Le problème est que vous devez créer un autre fichier css et l'adresser à l'aide de commentaires conditionnels pour ne pas freiner les autres navigateurs.

PS: ce problème devient très agaçant avec les sites Web à fond sombre.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top