クリックするとテキストボックスが削除され、jQueryを使用したスライドアニメーションを備えた大きなテキストエリアに置き換えられる展開矢印でテキストボックスを作成しようとしています。問題は、右側の相対的に配置された矢印と左側のラベルが、テキストボックスが拡大するにつれて下にスライドすることです。vertical-align、display、paddingおよびその他の CSS プロパティのさまざまな組み合わせを試して、それらをすべて無駄なく最上位に維持しようとしました。興味深いことに、デザインは Firefox で機能し、ラベルと矢印は希望する場所に留まりますが、Chrome や IE では機能しません。作品はこちらからご覧いただけます。
1 に答える
1
テキストエリアを設定する必要がvertical-align: top;あり、アニメーションを実行するときに変更しないでください。Chromeデバッガーで試してみましたが、正常に動作します。
また、なぜあなたはと交換する<input type="text" />の<textarea>ですか？最初から持っているだけでなく<textarea>、少しだけ高さを付けてみませんか？
UPD。要素にも割り当てvertical-align: top;て、<input>テキストエリアにスワップしたときにラベルと矢印が同じ場所にとどまるようにします。top必要に応じて、またはを使用margin-topして少し下に移動します。
//私は手元にIEを持っていないので、現在それを手伝うことはできません...提案された変更の後、IEで何が起こっていますか？
于 2012-06-09T13:01:51.960 に答える