Internet Explorer：溢出和浮动
我在 div 中有一个 img 。我已将 img 设置为“float：right”，将 div 设置为“overflow：hidden”。因为div比img窄，所以我希望img的左侧部分被切断并隐藏，这在Firefox中确实是这种情况。然而，IE拒绝承认img的“float:right”属性，总是将img锚定到div的左侧并切断img的右侧部分。这个问题有解决方法吗？或者我做错了什么？
**背景信息
我想这样做的原因是因为我希望img以jquery的“盲”效果出现（从左到右），然后以类似的盲效果消失（同样，从左到右）。
jquery默认的盲效果不处理从左到右的消失。我猜测其原因是某些模式（隐藏与显示）和某些方向（左与右或上与下）组合需要对 div 的左上角位置进行额外的移动。让我用一个例子来演示一下。假设我们想让图像从左到右显示并具有盲效果。嗯，这很简单，我们只要将div溢出设置为隐藏，图像左浮动，然后将div的宽度从0更改为图像的宽度即可。另一方面，如果我们现在想让图像从左向右消失并带有盲区效果，我们必须将图像设置为向右浮动，并将 div 的宽度从图像宽度缩小到 0，同时微移div 的左上角向右移动，以保持图像的右边缘静止。
我已经编写了代码来合并左上角的移动，它在 FF 中工作正常，但在 IE 中失败。因为 IE 不会尊重 float:right 而是坚持将图像锚定到左侧，所以效果是 jquery 的“幻灯片”而不是“盲目”动画。
I have an img inside a div. I have set the img to "float: right", and the div to "overflow: hidden". Because the div is narrower than the img, I expect the left portion of the img to be cut off and hidden, which is indeed the case in Firefox. However, IE refuses to acknowledge the "float: right" property of the img, always anchoring the img to the left side of the div and cutting off the right portion of the img. Is there a workaround for this problem? Or am I doing something wrong?
**background info
The reason I want to do this is because I want the img to appear with jquery's "blind" effect (from left to right), and then disappear with a similar blind effect (again, from left to right).
jquery's default blind effect does not handle the disappearing from left to right. I am guessing that the reason for this is that certain mode (hide vs. show) and certain direction (left vs right or top vs bottom) combinations require an additional movement of the top-left position of the div. Let me demonstrate with an example. Suppose we want to make an image appear from left to right with the blind effect. Well, this is simple, we just set the div overflow to hidden, the image to float left, then change the width of the div from 0 to the width of the image. On the other hand, if we now want to make the image disappear from left to right with the blind effect, we have to set the image to float right, and shrink the width of the div from the image width to 0, while nudging the div's top-left corner to the right, in order to keep the image's right edge stationary.
I've written up code to incorporate the top-left corner movements, and it works fine in FF, but fails in IE. Because IE won't respect the float:right and instead insists on anchoring the image to the left, the effect is that of jquery's "slide" instead of the "blind" animation.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于 IE 7，您可以尝试以下操作：
方向：rtl styel 在 IE 8 中使用 IE 7 标准模式对我有用。 IE 8 使用 IE 8 标准不需要方向样式。
希望这可以解决您的问题。我不确定它是否适用于您在 div 中可能拥有的任何其他内容，但它似乎达到了您想要的图像效果。
You might try the following for IE 7:
The direction: rtl styel works for me in IE 8 using IE 7 Standards mode. IE 8 using IE 8 standards does not need the direction style.
Hopefully this might solve your issue. I'm not sure if it will work with any other content you might have in the div, but it seems to achieve the affect you want with the image.
最坏的情况：在图像的左侧滑动一个白色的 DIV？不过非常跨平台。
Worst case: slide a white DIV over the left side of your image? Very cross-platform though.