Internet Explorer：溢出和浮动答案

【问题标题】：Internet Explorer: overflow and floatInternet Explorer：溢出和浮动
【发布时间】：2009-10-29 06:46:19
【问题描述】：

我在 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的“slide”而不是“blind”动画。

【问题讨论】：

标签： jquery internet-explorer animation overflow css-float

【解决方案1】：

您可以为 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>

方向：rtl 样式在 IE 8 中使用 IE 7 标准模式为我工作。使用 IE 8 标准的 IE 8 不需要方向样式。

希望这可以解决您的问题。我不确定它是否适用于您在 div 中可能拥有的任何其他内容，但它似乎可以达到您想要的图像效果。

【讨论】：

哇，成功了。方向属性肯定有效，而浮动属性被 IE 忽略。事实上，我完全摆脱了指定图像的浮动。谢谢！！！！
顺便说一句，想补充一点，仅使用方向属性在 FF、IE 和 Chrome 中有效。

【解决方案2】：

最坏的情况：在图像左侧滑动一个白色 DIV？不过非常跨平台。

【讨论】：

我没有想到这个解决方案。那肯定行得通。唯一的问题是，在我看来，如果图像位于复杂背景之上（如我的情况），那么 DIV 必须具有与其自身背景相同的复杂背景，如果这有意义的话。问题是它会有同样的问题。对于简单、统一的背景，这种方法似乎很容易实现并且非常简单。