在具有浮动元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时的奇怪行为答案

【问题标题】：strange behavior when using jQuery fadeOut function on element with floated element and absolutely positioned element在具有浮动元素和绝对定位元素的元素上使用 jQuery fadeOut 函数时的奇怪行为
【发布时间】：2009-04-09 18:03:56
【问题描述】：

我正在尝试使用 jQuery 淡出 div，使用 fadeOut 函数。在大多数情况下，它似乎工作正常，但在某些情况下，并非所有内容都会淡出。如果我在 div 中有一个绝对定位的元素和一个浮动元素，那么 fadeOut 函数将不起作用。如果我只有一个绝对定位的元素，它就不起作用。但是如果我有一个绝对定位的元素和一个无样式的元素，它就可以工作。这听起来很难解释，但您可以使用以下测试代码自己尝试：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>jQuery fadeOut test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="testBox1" style="position: relative">
    <div>test</div>
    <p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox1').fadeOut()">fade out</button>
<!-- works -->
<hr>

<div id="testBox2" style="position: relative">
    <div style="float: left">test</div>
    <p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox2').fadeOut()">fade out</button>
<!-- doesn't work -->
<hr>

<div id="testBox3" style="position: relative">
    <p style="position: absolute; left: 0; top: 0">This text should fade out.</p>
</div>
<br><br>
<button type="button" onclick="$('#testBox3').fadeOut()">fade out</button>
<!-- doesn't work -->
</body></html>

Working Example Here（将 /edit 添加到 URL 以播放示例）。

在 IE7 中似乎一切正常，但在 Firefox 和 Chrome 中，我遇到了奇怪的行为。谁能弄清楚为什么？我做错了什么，还是浏览器错误或 jQuery 中的错误？

【问题讨论】：

标签： jquery jquery-1.3

【解决方案1】：

这是 1.3.2 中的一个错误。我没有看到 1.3 中的行为。

将你的 jQuery 脚本指向

http://jqueryjs.googlecode.com/files/jquery-1.3.min.js

你会看到问题消失了。

这是一个固定的例子：

http://jsbin.com/olule/edit

【讨论】：

【解决方案2】：

问题是由 jQuery 1.3.2 检测可见元素的方式引起的。 fadeOut() 函数首先使用 is(":visible") 检测给定元素是否可见。如果它发现元素被隐藏，它不会做任何事情。根据文档，jQuery 1.3.2 引入了一个更改，其中“如果元素及其父元素占用文档中的空间，则元素假定为可见”。现在，问题是如果元素只包含浮动元素或绝对定位元素，它本身不占用空间（它的宽度和高度为零）。你可以通过给元素一些非零的高度和宽度来解决这个问题。

【讨论】：

【解决方案3】：

在元素中添加 &nbsp; 对我有用，但我希望他们能尽快修复它。

【讨论】：