¿Las URL del cursor son relativas al archivo css?

Question

Sé que se supone que las rutas son relativas al archivo css, pero ese no parece ser el caso para una imagen que estoy tratando de usar como cursor.

La estructura de archivos es:

Content/Site.css 
Content/images/butteryfly.ani 
Content/images/user.png 

Site.css:

.butterfly 
{  
cursor: url('images/butterfly.ani'), pointer;  
} 

/*this works*/ 
.ui-icon-user 
{ 
    background-image: url(images/user.png) !important; 
    background-position: 0 0; 
} 

Funciona si lo cambio a:

.butterfly 
{  
cursor: url('Content/images/butterfly.ani'), pointer;  
} 

¿Por qué no funciona el URL relativa para el cursor?

Editar: No funciona en Chrome, Firefox o IE9. En todos los navegadores, muestra el cursor de mano en lugar del personalizado.

Edit2: Para realizar un seguimiento: ¿cómo hago esto para que funcione en mi sitio, ya que las páginas html se encuentran en diferentes niveles? ¿Hay alguna forma de especificar una URL relativa de alguna manera en css o debería poner una copia del cursor en el mismo nivel que cada página (que apesta)?

Answer 1

Debe usar la extensión .cur para que funcione tanto en IE como en FF. Y en IE11 y versiones anteriores, la URL del archivo de cursor es relativa a la página, no al archivo css.

cursor: url('http://example.com/Content/images/butteryfly.cur'), default; 

Trate de evitar el uso de dos valores de url, ya que resulta en un golpe innecesario al servidor por IE. En su lugar, use una URL absoluta que funcionaría bien en IE, FF y Chrome. Opera usaría el predeterminado.

Answer 2

Solo sé que Internet Explorer interpreta las URL relativas como relativas al documento HTML, pero los navegadores modernos (Mozilla Firefox, Google Chrome) interpretan las URL relativas como relativas al ".css".

/* 
The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS  file 
*/ 

#example { 
    cursor: url('arrow.cur'),   /* Modern browsers */ 
      url('style/arrow.cur'),  /* Internet Explorer */ 
      default; 
}  

Answer 3

Le sugiero que lea este breve artículo. http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/

Hay 3 soluciones para un error de IE: IE no interpreta las URL de los cursores personalizados como relativas. Otros tipos de URL son interpretados correctamente en IE

1. utilizar rutas absolutas
2. movimiento el estilo cursores en la página HTML entre las etiquetas
3. uso IE comentarios condicionales, similar a la solución proporcionada por John C.