CSS cursor de selección de texto ie7, comportamiento extraño

StackOverflow https://stackoverflow.com/questions/1621132

  •  06-07-2019
  •  | 
  •  

Pregunta

Extraño aquí, con la esperanza de obtener algún comentario que me indique la dirección correcta.

Si mi #wrapper o cualquiera de los divs secundarios no tienen un color de fondo aplicado, ie7 cambia el puntero " normal " cursor en una " selección de texto " cursor al mover el mouse alrededor de la página (ya sea sobre el texto o no).

Pensé que había solucionado el problema hace un tiempo, pero cuando elimino el color de fondo de mi #wrapper o cualquiera de los divs secundarios, el problema vuelve a aparecer.

Solo busco algunos consejos o lo que debería estar comprobando. 

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

EDIT:

Parece ser porque los divs " hasLayout " ;, pero todavía no estoy seguro de cómo solucionarlo. Consulte este enlace.

EDIT 2:

No puedo encontrar más información sobre este " error ie7. " Cualquier persona que tenga alguna idea, o incluso si está al tanto de este error y puede simplemente hacérmelo saber, sé que no estoy loco. Me estoy volviendo realmente frustrado con Microsoft otra vez. Ya me costó unas horas extra de trabajo esta semana. Parece que nunca termina.

EDIT 3:

Aquí hay otro enlace de alguien que tiene el mismo problema.

EDIT 4:

STACKOVERFLOW.com sufre de este error! También lo hace mashable.com . Garantizo que MUCHOS desarrolladores web tienen este error en su sitio y ni siquiera lo saben.

Compruébelo usted mismo ... desplace el cursor por la página de cualquiera de los sitios. Observe que se convierte en un cursor de selección de texto cuando no debería.

Parece que sería fácil de solucionar con la propiedad cursor , pero el problema sería desencadenar el comportamiento adecuado del texto-selección-cursor cuando sea necesario.

¿Fue útil?

Solución

¿Es demasiado intrépido indicar explícitamente qué cursor debería ir a dónde? 

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

etc ...

Otros consejos

Estoy bastante seguro de que lo he encontrado antes, pero probablemente sea un poco demasiado sutil como para notarlo durante algunas pruebas superficiales del navegador. Pero ciertamente también he solucionado problemas al configurar un color de fondo.

Por lo que puedo decir, la mejor manera de solucionarlo es posicionar el elemento que causa los problemas, o agregar un div de envoltura posicionado a su alrededor. Lo más probable es que uses la posición : relative , aunque absolute y fix también deberían funcionar.

El posicionamiento del elemento en sí mismo generalmente funciona, pero agregar un div envoltorio podría funcionar de manera más consistente.

Por ejemplo, al agregar position: relative a la clase .post-text se corrige el cursor en las preguntas y respuestas de esta página.

El GIF transparente de 1x1 px funciona y también es una excelente solución para Este y otros errores en IE 6 a 8. Yo agregaría algo como esto a mis comentarios condicionales para todos los IE: 

* {
    background: url('images/fix1.gif');
}

¿Ha intentado configurar background-color: transparent; explícitamente? ¿Eso ayuda?

Esto puede sonar como un truco feo, pero ¿has intentado establecer un GIF de 1x1 px transparente (espaciador AKA) como fondo?

Esto no es perfecto, pero para este pequeño ejemplo parece funcionar para IE 7. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

No tengo idea de por qué esto parece funcionar, y ciertamente no es lo ideal. Por alguna razón, colocar el elemento p en un div en línea relativamente posicionado hace que el cursor del mouse se comporte más como yo esperaba.

No estoy seguro de que esto funcione en un sentido más amplio, aunque cuando hay una jerarquía de elementos.

Me doy cuenta de que esta no es una respuesta perfecta, pero podría estimular otras ideas.

La solución de Delilah, solo un poco simplificada, funciona muy bien para mí y también resuelve el problema de Mercator. 

div { cursor: default; }
div * { cursor: auto; }

El problema es que tienes que crear otro archivo css y solucionarlo con comentarios condicionales para no frenar otros navegadores.

PD: este problema se vuelve muy molesto con los sitios web de fondo oscuro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top