移動ラベルがFirefoxでうまく見える - 他のブラウザでうまくいかない

Question

対応する入力フィールドが必要になるたびに、ラベルが途切れないようにするための小さなスクリプトを書きました。それだけのFirefoxで期待どおりに動作しますが、私が試した他のすべてのブラウザでは（クロム、Internet Explorerや他の人が）下のボーダーが正当化保管しない：http://jsfiddle.net/5nZWJ/68/

問題がある：

ここでそれをチェックアウトしてください説明するのは難しいですが、試してみると分かります）。

すべてのブラウザでこのことをFirefoxのように見えるように変更するにはどうすればよいですか？

ありがとうございます！

Answer 1

私はあなたの問題を解決しました。それはすべてのブラウザで今スムーズです：http://jsfiddle.net/5nZWJ/70/

キーは下から絶対位置#formWrapperを持っています。これは、高さが増加したときに上から上に拡大し、上からの位置を再計算する必要がないことを意味します。

CSS：

#wrapper { 
    background-color: lightblue; 
    height: 110px; 
    width: 500px; 
    position:relative; /* Allows absolute figures to be predictable */ 
} 

#formWrapper { 
    background-color: yellow; 
    border-bottom: 4px solid red; 
    bottom: 29px; /* Changed from top and new measurement added */ 
    left: 120px; 
    height: 57px; 
    position: absolute; 
    z-index: 1; 
    width: 108px; 
} 

はJavaScript：

それはもはや変更または再計算する必要があるように私は、位置を参照するコードのすべての行を削除しません。

Answer 2

私はこれが

http://ejohn.org/blog/sub-pixel-problems-in-css/

境界ピクセルをカウント（ない実際には同じ問題が、あなたは、いくつかのアイデアを得る）どのように異なるブラウザ関連するかもしれないと思う

代わりに境界線を使用して、私はあなたをお勧めしますエレメントの周りにdivラッパーを追加します。背景色はボーダーカラーに設定され、パディングはボーダー幅に設定されます。