CSS curseur de sélection de texte IE7, comportement étrange

Etrange ici, dans l'espoir d'obtenir des commentaires pour me diriger dans la bonne direction. Si mon #wrapper ou l'une des divs enfant n'a pas de couleur d'arrière-plan appliquée, ie change le curseur de "pointeur" normal en un curseur "sélection de texte" lorsque vous déplacez la souris sur la page ou pas). Je pensais avoir corrigé le problème il y a quelque temps, mais lorsque je supprime la couleur de fond de mon #wrapper ou de l'une des divs enfants, le problème réapparaît.CSS curseur de sélection de texte IE7, comportement étrange

Juste à la recherche de quelques conseils 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:

semble être parce que le divs "hasLayout", mais je ne suis toujours pas sûr de savoir comment le fixer. Voir this link.

EDIT 2:

Je ne peux pas trouver plus d'informations sur ce "bug IE7." Quelqu'un qui a des idées, ou même si vous êtes au courant de ce bug et pouvez juste me le faire savoir, je sais que je ne suis pas fou. Je suis vraiment frustré par Microsoft. Cela m'a déjà coûté quelques heures supplémentaires de travail cette semaine. On dirait que ça ne finit jamais.

EDIT 3:

est ici another link de quelqu'un ayant le même problème.

EDIT 4:

STACKOVERFLOW.com souffre de ce bug! Il en est de même pour mashable.com. Je garantis que de nombreux web devs ont ce bug sur leur site et ils ne le savent même pas.

Vérifiez par vous-même ... passez votre curseur sur la page de l'un ou l'autre site. Notez qu'il se transforme en un curseur de sélection de texte alors qu'il ne devrait pas l'être.

On dirait qu'il serait facile de corriger avec la propriété cursor, mais le problème serait de déclencher un comportement correct de sélection de texte-curseur si nécessaire.

Source

2009-10-25 Jeff

Pourriez-vous indiquer à un exemple vivant? Je ne suis pas sûr que le problème est dans ces lignes ... –

Oui, par exemple en direct sur le lien que je viens de poster. Téléchargez le fichier sur la page de test et ouvrez-le dans ie7 pour le voir de première main. – Jeff

Vous n'êtes pas fou. Et j'ai trouvé d'autres problèmes qui ont des causes, mais pas encore de solution. – tahdhaze09

Est-ce trop hacky d'indiquer explicitement quel curseur devrait 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 ..

Source

2009-11-04 03:02:35 Zoe

Cela ne le résout pas entièrement. Le curseur de texte apparaît alors sur l'ensemble du bloc, y compris le remplissage et l'espace vide sur une dernière ligne partiellement remplie, par exemple, au lieu du simple texte. – mercator

D'accord. Excellente idée, celle que j'ai déjà essayée, mais ne la coupe pas pour la raison citée par mercator. – Jeff

Hmmm, en avoir besoin * c'est * précis, n'est-ce pas? Oh mon cher .. s'il vous plaît voir mon commentaire sur la question demandant un peu plus d'informations sur le raisonnement. – Zoe

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

Source

2009-10-25 18:43:22 stephenhay

Yeppers, essayé. Ne fonctionne pasJe suppose que j'espère que quelqu'un peut me donner quelque chose à "Google". Semble étrange que peu de gens ont déjà vécu cela. – Jeff

Dommage: je pensais que la transparence serait suffisante d'un "arrière-plan" pour l'empêcher de se produire. Je suppose que vous ne voulez pas d'arrière-plan? Sinon, vous pouvez en ajouter un dans une feuille de style IE7 via des commentaires conditionnels. Semble un de ces bugs de rendu pour lesquels il n'y a pas de solutions de contournement décentes. (Javascript?) Désolé, je n'ai pas pu aider. – stephenhay

Ouais, ma seule idée jusqu'à présent est de maquiller mon CSS et mettre une couleur de fond qui correspond à la partie principale de mon site - JUSTE POUR IE7, Lol. – Jeff

Cela peut sembler un bidouille laid, mais avez-vous essayé de définir un 1x1 px px transparent (AKA spacer) comme arrière-plan?

Source

2009-10-29 22:26:39 Seb

N'a pas essayé cela, mais si cela arrive, je pense que je préfère plutôt définir une couleur de fond à la place. Bonne suggestion, cependant. – Jeff

Cela sonne bien. @ Jeff: A-t-il aidé? –

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 il est certainement pas idéal. Pour une raison quelconque, placer l'élément p dans un div en ligne relativement positionné fait 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 mais quand il y a une hiérarchie d'éléments.Je réalise que ce n'est pas une réponse parfaite, mais cela pourrait stimuler d'autres idées.

Source

2009-10-31 18:42:19

Je suis sûr que je l'ai déjà rencontré auparavant, mais c'est probablement un peu trop subtil pour le remarquer lors de tests de navigateur superficiels. Mais j'ai également eu des problèmes corrigés en définissant une couleur d'arrière-plan. Pour autant que je sache, la meilleure façon de le réparer est de positionner l'élément à l'origine des problèmes, ou d'ajouter un div wrapper positionné autour de lui. Vous utiliseriez probablement position: relative, bien que absolute et fixed devrait fonctionner aussi.

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 corrige le curseur sur les questions et réponses sur cette page.

Source

2009-11-03 23:29:59 mercator

L'ajout de 'position: relative;' à mon #wrapper n'a fait aucune différence pour moi. En ce qui concerne l'emballage de mon emballage, eh bien, je suppose que je préfère vivre avec le curseur bizarrement. =) – Jeff

Assez juste. Je suis curieux, cependant, est-ce que l'ajout d'un wrapper positionné en plus le corrige? – mercator

solution de Dalila, seulement des œuvres simplifiées peu de bits grand pour moi et résout également le problème de mercator. Le problème est que vous devez créer un autre fichier css et l'adresser en utilisant des commentaires conditionnels pour ne pas freiner les autres navigateurs. PS: Ce problème devient très ennuyeux avec les sites Web de fond sombre.

Source

2010-08-13 23:33:26 puijob

Les travaux GIF transparents 1x1 px et est également un excellent correctif pour This et autres bugs dans IE 6 à 8. Je voudrais ajouter quelque chose comme ceci à mes commentaires conditionnels pour tous les IE:

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

Source

2011-02-22 15:04:16 Miroslav

CSS curseur de sélection de texte IE7, comportement étrange

Répondre

Questions connexes