Question

我在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不会尊重浮动：右边而是坚持将图像锚定在左边，效果是jquery的“幻灯片”而不是“盲”动画。

Answer 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 styel使用IE 7标准模式在IE 8中为我工作。使用IE 8标准的IE 8不需要方向风格。

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

Answer 2

最坏的情况：在图像的左侧滑动白色DIV？虽然非常跨平台。

Internet Explorer：溢出和浮动

2 个答案: