Internet Explorer: desbordamiento y flotación

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

Pregunta

Tengo un img dentro de un div. He configurado el img en "flotante: derecho", y el div en "desbordamiento: oculto". Debido a que el div es más angosto que el img, espero que la parte izquierda del img se corte y se oculte, lo cual es el caso en Firefox. Sin embargo, IE se niega a reconocer el "float: right" propiedad del img, siempre anclando el img al lado izquierdo del div y cortando la porción derecha del img. ¿Hay alguna solución alternativa a este problema? ¿O estoy haciendo algo mal?


** información de fondo

La razón por la que quiero hacer esto es porque quiero que el img aparezca con jquery's '' blind '' efecto (de izquierda a derecha), y luego desaparece con un efecto ciego similar (de nuevo, de izquierda a derecha).

El efecto ciego predeterminado de jquery no maneja la desaparición de izquierda a derecha. Supongo que la razón de esto es que ciertas combinaciones de modo (ocultar frente a mostrar) y cierta dirección (izquierda frente a derecha o superior frente a inferior) requieren un movimiento adicional de la posición superior izquierda del div. Déjame demostrarte con un ejemplo. Supongamos que queremos hacer que una imagen aparezca de izquierda a derecha con el efecto ciego. Bueno, esto es simple, simplemente configuramos el desbordamiento div en oculto, la imagen flota a la izquierda, luego cambiamos el ancho del div de 0 al ancho de la imagen. Por otro lado, si ahora queremos hacer que la imagen desaparezca de izquierda a derecha con el efecto ciego, tenemos que configurar la imagen para que flote a la derecha y reducir el ancho del div del ancho de la imagen a 0, mientras empujamos el esquina superior izquierda de div a la derecha, para mantener estacionario el borde derecho de la imagen.

He escrito código para incorporar los movimientos de la esquina superior izquierda, y funciona bien en FF, pero falla en IE. Debido a que IE no respetará el flotador: derecho y, en cambio, insiste en anclar la imagen a la izquierda, el efecto es el de "deslizamiento" de jquery en lugar de "ciego" animación.

¿Fue útil?

Solución

Puede probar lo siguiente para IE 7: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="overflow: hidden; width: 150px; direction: rtl;">
   <img src="yourimage.png" style="float: right" />
</div>
</body>
</html>

La dirección: rtl styel me funciona en IE 8 usando el modo de estándares IE 7. IE 8 usando los estándares IE 8 no necesita el estilo de dirección.

Espero que esto pueda resolver su problema. No estoy seguro de si funcionará con cualquier otro contenido que pueda tener en el div, pero parece lograr el efecto que desea con la imagen.

Otros consejos

Peor caso: ¿deslizar un DIV blanco sobre el lado izquierdo de su imagen? Sin embargo, multiplataforma.

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