Cursore IE 8 div e css

Nell'esempio seguente, quando si passa il mouse sulle icone, il cursore deve essere modificato in modo diverso. Funziona ad eccezione di IE 8. Su IE 8 queste icone sono diventate improbabili, cioè non solo il cursore non viene modificato, ma anche l'evento click di Jquery non si attiva. Considerare come il seguente codice HTML lavora a FF, IE7 e IE8 eventualmente a:Cursore IE 8 div e 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>

Qual migth essere la radice del problema? Cosa potrebbe essere possibile lavorare intorno?
Grazie in anticipo.

P.S. Cambiare DOCTYPE non è davvero possibile.
Anche se rimuovo float: lasciato su questo esempio sembra "risolto", ma quando lo rimuovo su un sito Web, oltre al design danneggiato, non aiuta anche.

fonte

2009-10-04 Andriy Tkach

Questo funziona troppo: 'cursore: puntatore importante,' per IE8 –

IE8 non mi piace vuoto div s. Mettere uno spazio vuoto con un pixel trasparente all'interno del div da <img/> sembra risolverlo.

Demo: http://jsbin.com/asiju (modificabile tramite http://jsbin.com/asiju/edit)

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

fonte

2009-10-04 11:53:10 brianpeiris

Ottimo! L'ho applicato, sembra essere risolto. Ma hai notato che il bordo di IMG in realtà non scompare su IE8? –

Hai ragione. Ho modificato la mia risposta per includere un pixel trasparente 1x1 nel tag immagine. Questo si sbarazza del confine: http://jsbin.com/asiju – brianpeiris

ugh, che brutto scherzo. non trabocca: auto fai il trucco? –

Non conosco alcun trucco per batterlo. Ma, se si può fare clic su smth, dovrebbe essere nel tag a, quindi inserire a e forse display:block. href potrebbe essere =#. Quella soluzione sembra essere semantica e buona per me :)

fonte

2009-10-04 11:30:38 IProblemFactory

Grazie, ma no, ho solo cercato di sostituire div a nel mio esempio: - non ha aiutato ... –

Voglio dire, inserire 'a' su' div', il cursore di default 'a' è puntatore :) – IProblemFactory

Sono d'accordo con Rinz. Probabilmente è meglio usare un collegamento con un'immagine (''), proprio come Stack Overflow, o almeno usare un pulsante ('') con un'immagine di sfondo. È più semantico. – brianpeiris

ne dite:

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

Io lo uso io stesso e funziona benissimo.

fonte

2009-12-09 15:41:49 Nothing

non è possibile inserire un div all'interno di uno a –

sì. D'accordo con un timhessel: è cattiva semantica. –

Estrarre lo float:left e la classe css si presenta come di seguito.

.icon-button { cursor: pointer; }

Dovrebbe funzionare.

fonte

2012-03-10 07:48:15 Sridhar

Questo solo ha lavorato per me in IE8, super semplice

cursor: pointer !important;

fonte

2013-08-15 20:48:15

Questo ha funzionato perfettamente per me. Grazie! – Khagan

Cursore IE 8 div e css

risposta

Problemi correlati