¿Los links no pueden ser bloques?
Este error nos dejo atónitos (jajaja, atónitos) a mi y al buen Mau. La página con el error en concreto es Global Tolerance en la barra de navegación. Ese menú, en html, no es más que una lista con anchors. Cada anchor está con display: block; y tiene un alto y un ancho específico. Todo bien, pero en IE8 NO se le puede dar click. ¿El culpable? Bueno, es un poco más complejo de lo que parece.
Primero que nada, vamos a aislar y simplificar el problema. imaginense el siguiente código html:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <title>Page Title</title>
- <link rel="stylesheet" href="css/style.css" type="text/css" title="Main style" />
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <meta name="description" content="Content" />
- </head>
- <a href="#">testing</a>
- </div>
- <a href="#">testing</a>
- </body>
- </html>
Y el siguiente CSS:
- a:link, a:visited {display: block; width: 100px; height: 100px; border: 1px solid red}
Bastante simple. Esto nos va a regresar esto:
Y aquí tienen un html para que lo prueben ustedes mismos. Ahora bien, trataré de explicarles a los que no tienne IE8, aunque sería mejor que abriera en archivo en IE8 y lo probaran por ustedes mismos.
Cómo pueden ver, la ÚNICA diferencia entre un link y otro es que el primero está dentro de un div. Ahora, les invito a que pasen el mouse en esta zona del link:
Haganlo en ambos links. En teoría, pasar el mouse sobre cualquier parte del link debería activarlo, y esto se cumple para el link de abajo (el que no está dentro de un div); pero para el link de arriba, que está dentro de un div padre, esto no sucede. El icono de la manita que nos indica que podemos dar click para ir a la página deseada sólo funciona si pasamos el mouse sobre la palabra "testing" o sobre el borde rojo; pero no en el area blanca del link (que sigue siendo parte del link. ¿Pero qué carajos? Si, si... igual me quedé yo... Lo peor: el bug es tan fácil de reproducir... y afecta a todos los links en caja.
Para solucionar esto, la cosa es bastante sencilla (aunque no tan lógica... al menos, no para mi). Agregar position: relative ya sea al div o al anchor en sí, arreglará el problema. Aquí les dejo el html con el bug arreglado. Sobre el por qué el position: relative lo arregla... no tengo idea.
Lo peor de este problema es que no sólo sucede con anchors... parece que también pasa en inputs y buttons (probé con los botones en css que hice hace un tiempo)
Gracias por la info, me interesa el primer error, muy buena explicacion del por que del error, pero... lo de 'display: block;'? wtf!, es algo que uso siempre, pero que bueno que tengas la solucion.
Y bueno creo que voy a tener que descargar a ie8 ;(
saludos
Holas, muy wena la info, casualmente io ando viendo tu pagina con firefox 3.0bpre5, un nightly build, y en el ejemplo del div k es un link al pasar el mouse, tampoco me lo reconocio :O tuve k ir al enlace k tiene el fixed...k raro :O
ojala y tambien arreglaran javascript en IE8. Es una pesadilla hacer javascript debugging en el maravilloso mundo de IE.
Mis webos que!
Hola...
Estuve leyendo tus errores y en algunos note que están mal estructurados por eso sucede eso... y como firefox es muy complaciente pues no se nota... por ejemplo en muchos blogs el firefox acopla el tamaño de las imagenes a el div del post y cuando lo ven en otro navegador que como no le espicifaron el tamaño pues lo pone en el tamaño normal y a veces sobrepasa el tamaño por esos e ven mal y luego se quejan...
muy bueno los datos... oye perdona q me salga del tema, pero esq me ha llamado la atencion el theme de tu windows, cual utilizas?? jeje salu2
None...
None...
Estos de Mocosoft son terribles....