javascript - Javascript/CSS 浮动标签

Question

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

我有一个可以直接查看或在 iFrame 中查看的表单。在输入上，我使用jvfloat.js使用这些placeholder值给出浮动标签。

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

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

铬合金

在 IFrame 中：

在文本字段中键入不会弹出标签。检查显示“activeLabel”类添加成功，但它似乎没有呈现。似乎 CSS 转换无法将标签从输入后面向上移动。

外部 IFrame：

按预期工作。

火狐

在 IFrame / 外部 IFrame 中：

按预期工作

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

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

score 1 · Accepted Answer

这是一个CSS问题。

您正在使用display、visibility和opacity来显示/隐藏您的浮动占位符。太过分了，你只需要一个！我明白opacity了，你需要它来获得效果。

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

1 回答 1