L'image du curseur personnalisé ne fonctionne pas dans tous les IE ?

Question

Je pense avoir essayé différentes méthodes suggérées partout sur Internet, mais rien n'a fonctionné. Voici mon code css actuel :

div {
   cursor: url(images/zoomin.cur), auto;
}

Il fonctionne bien, sauf dans IE...

Answer 1

Malheureusement, cursor est tout simplement bogué dans IE, au moins jusqu'à la version 8 incluse.

Dans Internet Explorer pour Windows jusqu'à la version 8 incluse, si un fichier relative est spécifiée dans un fichier de feuille de style externe, la fonction est considéré comme étant l'URI du document contenant l'élément et non l'URI de la feuille de style dans laquelle la déclaration apparaît.

http://reference.sitepoint.com/css/cursor

Vous pouvez vouloir utiliser un conditional comment pour cibler IE et ensuite lui fournir une règle de style modifiée avec une autre url .

Answer 2

J'ai résolu de cette façon pour le saisir le curseur dans Internet Explorer, en citant le @JasonGennaro La réponse de la Commission :

Dans Internet Explorer pour Windows jusqu'à la version 8 incluse, si un fichier valeur URI relative est spécifiée dans un fichier de feuille de style externe, l'URI de base est considéré comme étant l'URI du document contenant la feuille de style. est considéré comme l'URI du document contenant l'élément et non l'URI de la feuille de style dans laquelle la déclaration apparaît.

.grab_cursor {
    cursor: grab !important; /*Without !important the .cur-file property below will overwrite this and browser will show default cursor*/
    cursor: -moz-grab !important;
    cursor: -webkit-grab !important;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

Arbre des fichiers :

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

Bonnes références :

• Un
• Deux
• Trois

Démonstration de travail :

• Démo

Answer 3

Comme les différents navigateurs traitent les URI relatifs différemment, le style curseur permet une liste d'urls. Vous pouvez avoir un chemin qui fonctionne pour IE et un autre qui fonctionne pour les autres navigateurs :

div {
   cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}

Dans ma configuration, la première url fonctionne pour IE11 (et les versions antérieures) parce que le script qui utilise le curseur est dans 'cgi-bin/app' tandis que les fichiers .cur et .css sont dans 'app/images'. IE utilise l'emplacement du document comme base, je dois donc ajouter plus d'informations sur le chemin pour localiser le fichier du curseur. La deuxième URL fonctionne dans Firefox parce que les fichiers .cur et .css se trouvent au même endroit et que Firefox utilise l'emplacement du fichier .css comme base, de sorte que des informations supplémentaires sur le chemin ne sont pas nécessaires.

Answer 4

De la documentation msdn :

url(uri)
Internet Explorer 6 et plus. Le curseur est défini par l auteur, en utilisant un URI personnalisé, tel que url('mycursor.cur'). Curseurs de type .CUR et .ANI sont les seuls types de curseurs pris en charge. .

Answer 5

De : http://www.w3schools.com/cssref/pr_class_cursor.asp

La propriété curseur est prise en charge par tous les principaux navigateurs.

Remarque : Opera 9.3 et Safari 3 ne prennent pas en charge les valeurs URL.

Remarque : la valeur "inherit" n'est pas prise en charge par IE7 et les versions antérieures. IE8 requiert un !DOCTYPE. IE9 prend en charge la valeur "inherit".