0

我在 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 的“幻灯片”而不是“盲”动画。

4

2 回答 2

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 中可能拥有的任何其他内容，但它似乎可以达到您想要的图像效果。

于 2009-10-30T01:49:20.493 回答
0

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

于 2009-10-30T00:55:11.053 回答