Firefox jQuery UI 位置效果

Question

这需要一些历史记录，以便您可以了解一个修复如何变成了一个本身需要修复的问题：

看看 这个 jsFiddle 在 Firefox 中。单击该按钮，您将看到 HTML 区域的左上角出现一个栗色框。在 Chrome、IE 和 Safari 中，在同一个 jsFiddle 中，带有复选框的单元格将显示栗色框，然后淡出到背景，这就是所需的行为。

请注意，在 js 代码和 css 中，div 被添加到复选框单元格，然后淡出。这应该是这个jsFiddle中发现的问题的解决方案。在 js 代码中，您可以看到我使用了 UI 高亮效果，该效果适用于所有浏览器，但在转到背景图像之前会淡出为白色。

为了解决淡入白色然后变成背景图像的问题，以前的 jsFiddle 应该是解决方案，但它只引入了 Firefox 问题。尝试使用 UI 的位置效果来解决这个问题并没有帮助。

如果有人能帮助我找到一种跨浏览器解决方案，该解决方案可以突出显示复选框单元格，而不会像突出显示效果那样褪色为白色，我将不胜感激。

<代码>

Answer 1

将您的输入包装到

中，它也可以在 FF 中工作。 FF 中表中的绝对定位似乎是一个问题，即使 具有 position:relative。

这是修改后的fiddle。

也可以仅使用 jQuery 进行动态包装/展开。按以下方式修改你的JS：

 $('#classesTable input:checkbox').wrap('<div style="position: relative"/>').parent().append('<div class="checkwrap" />');

 $('#classesTable .checkwrap').fadeOut(1000, function() {
       $(this).unwrap().remove();
 });

这里是 fiddle

Answer 2

这不是问题——是你的问题。 Td 不能相对定位。使用 div iside td width position:relative