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的任何主要問題，這些問題都會導致這種奇怪的行為嗎？

Answer 1

這是一個CSS問題。

您正在使用display ， visibility和opacity來顯示/隱藏浮動占位符。 那太過分了，您只需要一個！ 我變得opacity ，您需要它以達到效果。

我放棄了對visibility任何使用，現在可以使用：

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