Internet Explorer: overflow e float

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

Domanda

Ho un img all'interno di un div. Ho impostato img su "float: right", e il div su "overflow: nascosto". Poiché il div è più stretto di img, mi aspetto che la parte sinistra di img venga tagliata e nascosta, come in effetti è il caso di Firefox. Tuttavia, IE rifiuta di riconoscere il "float: right" proprietà dell'img, ancorando sempre l'img sul lato sinistro del div e tagliando la parte destra dell'imm. Esiste una soluzione alternativa per questo problema? O sto facendo qualcosa di sbagliato?


** informazioni di base

Il motivo per cui voglio farlo è perché voglio che l'img appaia con "cieco" di jquery; (da sinistra a destra), quindi scompaiono con un effetto cieco simile (di nuovo, da sinistra a destra).

L'effetto cieco predefinito di jquery non gestisce la scomparsa da sinistra a destra. Immagino che la ragione di ciò sia che determinate combinazioni di modalità (nascondi vs mostra) e determinate direzioni (sinistra vs destra o in alto vs in basso) richiedono un movimento aggiuntivo della posizione in alto a sinistra del div. Lasciami dimostrare con un esempio. Supponiamo di voler far apparire un'immagine da sinistra a destra con l'effetto cieco. Bene, questo è semplice, abbiamo appena impostato il div overflow su nascosto, l'immagine su float a sinistra, quindi cambiamo la larghezza del div da 0 alla larghezza dell'immagine. D'altra parte, se ora vogliamo far scomparire l'immagine da sinistra a destra con l'effetto cieco, dobbiamo impostare l'immagine in modo che galleggi a destra e ridurre la larghezza del div dalla larghezza dell'immagine a 0, mentre spingendo il div nell'angolo in alto a sinistra a destra, al fine di mantenere fermo il bordo destro dell'immagine.

Ho scritto il codice per incorporare i movimenti dell'angolo in alto a sinistra, e funziona bene in FF, ma fallisce in IE. Poiché IE non rispetterà il float: a destra e insiste invece sull'ancoraggio dell'immagine a sinistra, l'effetto è quello della "diapositiva" di jquery; invece del "cieco" animazione.

È stato utile?

Soluzione

Potresti provare quanto segue per 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 direzione: rtl styel funziona per me in IE 8 usando la modalità Standard IE 7. IE 8 che utilizza gli standard IE 8 non necessita dello stile di direzione.

Speriamo che questo possa risolvere il tuo problema. Non sono sicuro che funzionerà con qualsiasi altro contenuto che potresti avere nel div, ma sembra ottenere l'effetto desiderato con l'immagine.

Altri suggerimenti

Caso peggiore: far scorrere un DIV bianco sul lato sinistro dell'immagine? Molto multipiattaforma però.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top