IE no respetar: flotar en el elemento

El trabajo en el siguiente sitio web: http://cetcolor.com IE no respetar: flotar en el elemento

El gráfico de cabecera con el "leer sobre él" botón tiene un enlace colocado en vuelo estacionario que cuando se dio la vuelta muestra un gráfico botón naranja y es una enlace clicable.

Sin embargo, en los navegadores IE no funciona.

Aquí está el código HTML afectada:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div>

Y aquí es el CSS referencia:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
}

¿Alguien tiene alguna idea de por qué el vuelo estacionario no funciona en los navegadores IE?

Fuente

2012-03-22 Yazmin

Una de las causas podría ser que tiene un enlace vacío. Intente insertar texto y haga 'text-indent: -9999px' para moverlo. – easwee

Creo que tienes razón en que el problema es que el enlace está vacío. Cuando agrego contenido al enlace, funciona. Cuando agrego el texto-sangría a la primera declaración anterior, deja de funcionar. No estoy seguro de qué hacer con eso ... – Yazmin

Tengo una solución para usted. Simplemente defina un color de fondo o una imagen de fondo para su clase read_about_it.

Existe un error lógico obvio en su código CSS/o en IE, depende del punto de vista. Tu etiqueta A está vacía; no me refiero a texto sino a fondo (cambias el fondo en tu estado de desplazamiento). Todos sabemos que IE vive en su propio mundo y maneja HTML de manera diferente porque usa el antiguo motor Trident. Sin embargo, IE no cambiará el fondo en el estado de desplazamiento si el elemento está vacío (no tiene fondo) porque IE asume que no hay necesidad de cambiar o crear algo que no exista.
¡Salud!

Fuente

2012-03-22 16:35:57

Pude hacerlo funcionar agregando un gif transparente al fondo. Muchas gracias. – Yazmin

¡De nada! Es una buena idea usar un GIF transparente. –

Si está utilizando IE6 no soporta: flotar en cualquier elemento excepto

<a>

he tenido tiempo mediante el uso de JavaScript

onmouseover 
onmouseout

eventos.

Fuente

2012-03-22 16:10:13

No es cierto. IE admite ': hover' en todos los elementos. IE6 no admite ': hover' en ningún elemento excepto en la etiqueta' '. Todas las versiones superiores que admite IE6: se desplazan muy bien. – easwee

Gracias easwee por la aclaración. Actualicé mi redacción. –

Agregar "display: block;" a ella, y debería funcionar para usted.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

Fuente

2012-03-22 16:11:31

Intenté esto pero no funcionó. ¿Es este modo específico - estándar, suelto? – Yazmin

"display: inline-block;" también funcionó - gracias. – buffjape

tengo tienen el mismo problema y he resolver este problema:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
}

El "fondo: RGBA (255, 255, 255, 0)" es una palabra clave para resolver este problema. Pero si quieres IE-7 O más viejo puedes poner background-image: url (URL_TO_TRANSPARENT_IMAGE).

Fuente

2013-06-05 14:25:10

IE no respetar: flotar en el elemento

Respuesta

Cuestiones relacionadas