IE 8 curseur div et css

Dans l'exemple ci-dessous lorsque vous passez la souris sur les icônes, le curseur doit être changé pour différent. Cela fonctionne à l'exception de IE 8. Sur IE 8, ces icônes sont devenues non-cliquables, c'est-à-dire que non seulement le curseur n'est pas changé, mais aussi que l'événement Jquery Click ne se déclenche pas. Pensez à la façon dont le code html suivant fonctionne à FF, IE7 et éventuellement à IE8:IE 8 curseur div et css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { 
      float: left; 
      cursor: pointer; 
     } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
</style> 
</head> 
<body> 
    <div class="icon-button ui-icon"></div> 
    <div>Sample Text</div> 
</body> 
</html>

Quelle migth la racine du problème? Quels pourraient être les lieux de travail possibles?
Merci d'avance.

P.S. Changer de DOCTYPE n'est pas vraiment possible.
Aussi, si je supprime float: gauche sur cet exemple, il semble que "fixe", mais quand je l'enlève sur un site Web, en plus de la conception brisée, il n'aide pas aussi.

Source

2009-10-04 Andriy Tkach

Cela fonctionne aussi: 'curseur: pointeur important,' IE8 –

IE8 n'aime pas vide div s. Mettre un blanc <img/> avec un pixel transparent à l'intérieur du div semble le réparer.

Démo: http://jsbin.com/asiju (via éditable http://jsbin.com/asiju/edit)

source HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { float: left; cursor: pointer; } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
     .dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; } 
    </style> 
    </head> 
    <body> 
    <div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div> 
    <div>Sample Text</div> 
    </body> 
</html>

Source

2009-10-04 11:53:10 brianpeiris

Super! Je l'ai appliqué, semble être fixé. Mais avez-vous remarqué que la frontière d'IMG ne disparaît pas réellement sur IE8? –

Vous avez raison. J'ai édité ma réponse pour inclure un pixel transparent 1x1 dans l'étiquette d'image. Cela se débarrasse de la frontière: http://jsbin.com/asiju – brianpeiris

pouah, quel hack méchant. ne déborde pas: auto fait l'affaire? –

Je ne connais aucun bidouillage pour le battre. Mais, si l'on pouvait cliquer sur smth, cela devrait être dans la balise a, alors insérez a et peut-être display:block. href pourrait être =#. Cette solution semble être sémantique et bonne pour moi :)

Source

2009-10-04 11:30:38 IProblemFactory

Merci, mais Nope, je viens d'essayer de remplacer div a dans mon exemple: - ça n'a pas aidé ... –

Je veux dire, insérer 'a' à' div', le curseur 'a' par défaut est pointeur :) – IProblemFactory

Je suis d'accord avec Rinz. Il est probablement préférable d'utiliser un lien avec une image (''), comme le fait Stack Overflow, ou au moins d'utiliser un bouton ('') avec une image de fond. C'est plus sémantique. – brianpeiris

Que diriez-vous:

<a href="whatever.php"> 
<div class="BG IMAGE" style="cursor:The one you want"></div> 
</a>

Je l'utilise moi-même et il fonctionne très bien.

Source

2009-12-09 15:41:49 Nothing

vous ne pouvez pas mettre un div à l'intérieur d'un –

yep. D'accord avec un timhessel - c'est une mauvaise sémantique. –

Retirez le float:left et la classe css ressemble à ci-dessous.

.icon-button { cursor: pointer; }

Cela devrait fonctionner.

Source

2012-03-10 07:48:15 Sridhar

Ce tout a fonctionné pour moi dans IE8, super simple

cursor: pointer !important;

Source

2013-08-15 20:48:15

Cela a fonctionné parfaitement pour moi. Merci! – Khagan

IE 8 curseur div et css

Répondre

Questions connexes