IE 8 div et de css curseur

Dans l'exemple ci-dessous lorsque vous passez la souris sur les icônes de curseur doit être changé de différentes manières. Il fonctionne à l'exception de IE 8. Sur IE 8 ces icônes s'est avéré être unclikable, c'est à dire non seulement le curseur ne sont pas modifiés, mais également Jquery cliquez sur l'événement ne se déclenche pas. Examiner comment le code html suivant fonctionne à FF, IE7 et, éventuellement, à IE8:

<!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>

Ce migth être la racine du problème? Ce qui pourrait être possible workarrounds?
Merci à l'avance.

P. S. de Changer le DOCTYPE n'est pas vraiment possible.
Aussi, si je retire float: left sur cet exemple, il semble que "fixe", mais lorsque je le supprime sur un site, en plus de cassé design, ça n'aide pas aussi.

Cela marche aussi: cursor: pointer !important; pour ie8

OriginalL'auteur Andriy Tkach | 2009-10-04

  1. 3

    IE8 n'aime pas le vide divs. Mettre un vide <img/> avec un pixel transparent à l'intérieur de la div semble pour le fixer.

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

    HTML source:

    <!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>
    Super! J'ai appliqué, semble être corrigé. Mais avez-vous remarqué que la frontière de l'IMG ne fait pas disparaître sur IE8?
    Vous avez raison. J'ai édité ma réponse à inclure une 1x1 pixel transparent dans la balise image. Qui se débarrasse de la frontière: jsbin.com/asiju
    pouah, quel vilain hack. ne pas overflow: auto faire l'affaire?

    OriginalL'auteur brianpeiris

  2. 1

    Je ne connais pas un hack pour le battre. Mais, si qch pourrait être cliqué, il devrait être dans a tag, alors insérez a et peut-être display:block. href pourrait être =#. Cette solution semble être de la sémantique et de bon pour moi 🙂

    Merci, mais non, j'ai juste essayé de remplacer div dans mon exemple: <a class="icône-bouton ui-icon" href="#"></a> - il n'a pas aidé...
    Je veux dire, insérer a à div, par défaut a curseur pointeur 🙂
    Je suis d'accord avec Rinz. Il est probablement préférable d'utiliser un lien avec une image (<a><img/></a>), tout comme le Débordement de Pile, ou au moins utiliser un bouton (<button></button>) avec un background-image. C'est plus sémantique.

    OriginalL'auteur IProblemFactory

  3. 1

    Comment sur: 

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

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

    vous ne pouvez pas mettre un div à l'intérieur d'un un
    yep. D'accord avec un timhessel - c'est mauvais sémantique.

    OriginalL'auteur Nothing

  4. 1

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

    .icon-button { cursor: pointer; }

    Il devrait fonctionner.

    OriginalL'auteur Sridhar

  5. 1

    Ce juste travaillé pour moi dans IE8, super simple

    cursor: pointer !important;
    Cela a fonctionné parfaitement pour moi. Merci!

    OriginalL'auteur Leon Gaban