El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0
photo credit: jeffwilcox
Reporto lo que parece un bug de IE7, por que en el resto de versiones de Internet Explorer parace que no se da el mismo error.
Y es que en IE7, y solo en IE7, cuando un enlace tiene el estilo border: 0, y el estado :hover contiene background-color: #FFF, no funciona dicho background-color.
Pero no funciona solo en el caso de que el color de fondo sea blanco. Si sustituimos #FFF o #FFFFFF por otro color, incluso cercano, como #FEFEFE, se ve perfectamente.
Ojo, si declaramos el border: 0 en un estilo reset del tipo “*{border:0}” estamos condenados.
Dejo un enlace y el código de ejemplo para comprobarlo:
<!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" lang="es" xml:lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0</title>
<style type="text/css">
body {
background-color:#999; }
a{
border: 0;
}
a:hover{
background-color: #FFF;
}
</style>
</head>
<body>
<a href="#">Enlace con border: 0 y color de fondo #FFF en el estado :hover. En IE7 no se verá el color de fondo al hacer rollover.</a>
</body>
</html>