Javascript/CSS float 标签

Question

我遇到了一个非常奇怪的问题，似乎无法弄清楚我是在查看 javascript 还是 css 问题。这是一个jSFiddle对于我正在谈论的内容的某些上下文。如果您在输入框中键入但没有看到标签弹出窗口，请删除文本并再次键入……很奇怪吧？

我有一个可以直接查看或在 iFrame 中查看的表单。在输入中，我使用 jvfloat.js使用 placeholder 值提供 float 标签。

$(document).ready( function() {
   $('input').jvfloat();
});

我在浏览器(当前版本)中得到不同的结果，奇怪的是，无论是否在 iFrame 中。

Chrome

在 IFrame 中:

Typing in text field doesn't popup label. Inspection shows "activeLabel" class added successfully, but it doesn't seem to render. Seems like a CSS transform isn't working to move the label up from behind the input.

外部 IFrame:

Works as expected.

火狐

在 IFrame 中/在 IFrame 之外:

Works as expected

我还没有在任何其他浏览器中尝试过。有时标签不起作用，我无法始终如一地重复这个问题。

在 jsFiddle 中，您能看到 javascript 或 CSS 的任何主要问题会导致这种奇怪的行为吗？

Answer 1

这是一个 CSS 问题。

您正在使用 display、visibility 和 opacity 来显示/隐藏 float 占位符。那太过分了，你只需要一个!我得到了 opacity，你需要它来获得效果。

我放弃了对 visibility 的任何使用，现在它可以工作了:

http://jsfiddle.net/njjZr/3/