IE 8 cursor div y css

En el siguiente ejemplo, al pasar el cursor por encima del ícono, el cursor debe cambiarse a diferente. Funciona a excepción de IE 8. En IE 8, estos iconos se volvieron imposibles de cliar, es decir, no solo no se cambian los cursores, sino que el evento de clic de Jquery no se dispara. Considere cómo el siguiente código HTML trabaja en FF, Internet Explorer 7 y, finalmente, en IE8:IE 8 cursor div y 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>

Lo migth ser la raíz del problema? ¿Qué podría ser posible para trabajar?
Gracias de antemano.

P.S. Cambiar DOCTYPE no es realmente posible.
También si elimino flotante: izquierdo en este ejemplo parece "fijo", pero cuando lo elimino en un sitio web, además de un diseño roto, tampoco ayuda.

Fuente

2009-10-04 Andriy Tkach

Esto funciona también: 'cursor: puntero importante;' para IE8 –

IE8 no me gusta vacío div s. Poner en blanco <img/> con un píxel transparente dentro del div parece arreglarlo.

Demostración: http://jsbin.com/asiju (editable a través de http://jsbin.com/asiju/edit)

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

Fuente

2009-10-04 11:53:10 brianpeiris

¡Genial! Lo he aplicado, parece ser fijo. ¿Pero notó que el borde de IMG en realidad no desaparece en IE8? –

Tienes razón. He editado mi respuesta para incluir un píxel transparente de 1x1 en la etiqueta de la imagen. Eso se deshace de la frontera: http://jsbin.com/asiju – brianpeiris

ugh, qué hack desagradable. no se desborda: ¿hacer el truco? –

No conozco ningún truco para superarlo. Pero, si se pudiera hacer clic en smth debería estar en la etiqueta a, así que inserte a y tal vez display:block. href podría ser =#. Esa solución parece ser semántica y buena para mí :)

Fuente

2009-10-04 11:30:38 IProblemFactory

Gracias, pero no, he acaba de intentar sustituir a div a en mi ejemplo: - no ayudó ... –

Quiero decir, inserte 'a' en' div', el cursor 'a' predeterminado es puntero :) – IProblemFactory

Estoy de acuerdo con Rinz. Probablemente sea mejor utilizar un enlace con una imagen (''), al igual que Stack Overflow, o al menos usar un botón ('') con una imagen de fondo. Es más semántico. – brianpeiris

¿Qué tal:

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

Yo lo uso yo y funciona bien.

Fuente

2009-12-09 15:41:49 Nothing

no se puede poner un div dentro de un –

sí. Estoy de acuerdo con un timhessel: es una semántica mala. –

Saque el float:left y la clase css se ve a continuación.

.icon-button { cursor: pointer; }

Debería funcionar.

Fuente

2012-03-10 07:48:15 Sridhar

Esto sólo trabajó para mí en IE8, super simple

cursor: pointer !important;

Fuente

2013-08-15 20:48:15

Esto funcionó perfectamente para mí. ¡Gracias! – Khagan

Respuesta

Cuestiones relacionadas