Internet Explorer: débordement et flottement

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

Question

J'ai un img dans une div. J'ai paramétré img sur "float: right", et la div sur "overflow: hidden". Comme la div est plus étroite que l’img, j’espère que la partie gauche de l’img sera coupée et cachée, comme c’est le cas dans Firefox. Cependant, IE refuse de reconnaître le "float: right". propriété de l’img, ancrant toujours l’img au côté gauche de la div et coupant la partie droite de l’img. Existe-t-il une solution de contournement à ce problème? Ou est-ce que je fais quelque chose de mal?


** informations de fond

La raison pour laquelle je veux faire cela est que je veux que l’img apparaisse avec "javery" en aveugle " effet (de gauche à droite), puis disparaît avec un effet aveugle similaire (encore une fois, de gauche à droite).

L'effet aveugle par défaut de jquery ne gère pas la disparition de gauche à droite. Je suppose que la raison en est que certaines combinaisons de mode (masquer contre montrer) et certaines directions (gauche contre droite ou haut contre bas) nécessitent un déplacement supplémentaire de la position supérieure gauche de la div. Laissez-moi démontrer avec un exemple. Supposons que nous voulions faire apparaître une image de gauche à droite avec l’effet aveugle. Eh bien, c’est simple, il suffit de définir le débordement de div sur masqué, l’image de flotter à gauche, puis de changer la largeur de la div de 0 à la largeur de l’image. Par contre, si nous voulons maintenant que l’image disparaisse de gauche à droite avec l’effet aveugle, nous devons définir l’image flottante vers la droite et réduire la largeur du div de la largeur de l’image à 0 tout en déplaçant le curseur vers le bas. Le coin supérieur gauche de div à droite, afin de garder le bord droit de l'image immobile.

J'ai écrit du code pour incorporer les mouvements du coin supérieur gauche, et cela fonctionne très bien dans FF, mais échoue dans IE. Parce que IE ne respecte pas le flottant: right et insiste plutôt pour ancrer l'image à gauche, l'effet est celui de jquery's "slide". au lieu de "aveugle". animation.

Était-ce utile?

La solution

Vous pouvez essayer ce qui suit pour 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 direction: rtl styel fonctionne pour moi dans IE 8 en utilisant le mode IE 7 Standards. IE 8 utilisant les normes IE 8 n’a pas besoin du style de direction.

J'espère que cela pourrait résoudre votre problème. Je ne sais pas si cela fonctionnera avec tout autre contenu que vous pourriez avoir dans la div, mais cela semble produire l'effet que vous souhaitez avec l'image.

Autres conseils

Pire cas: faites-vous glisser un DIV blanc sur le côté gauche de votre image? Très multi-plateforme cependant.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top