テキスト入力プレースホルダーがIEおよびFirefoxに表示されない

Question

テキスト入力プレースホルダーは、-moz-placeholder属性を使用したにもかかわらずIEおよびFirefoxで表示を拒否します。 FirefoxまたはIEを使用している場合は、on the contact page hereと表示されます。

誰かが私が数週間これを理解しようとしていますように助けてもらえますか？私のコードのサンプルは以下の通りです：

input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #aaa; 
    font-size: 18px; 
} 

    input:-ms-input-placeholder, textarea::-ms-input-placeholder { 
     color: #aaa; 
     font-size: 18px; 
    } 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #aaa; 
    font-size: 18px; 
} 

Answer 1

luke2012はbox-sizing: border-box;がテキストタイプの入力フィールドで使用されているときにこれが発生したように。しかし、これは、固定高さが使用されている場合（Bootstrapフレームワークなど）にのみ発生し、上部と下部のパディングが多すぎる場合に発生します。プレースホルダーのテキストが表示されないようにするだけでなく、Firefoxでも入力テキストの入力を妨げます。

box-sizing: border-box;を保持し、上部と下部のパディングを削除して、入力フィールドに含める高さ（すべての境界線を含む）を増やすことをお勧めします。

input[type="email"], input[type="password"], input[type="text"] 
{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 42px; // Increase height as required 
    margin-bottom: 30px; 
    padding: 0 20px; // Now only left & right padding 
} 

これは、より安定した状態を保ち、ブートストラップなどのフレームワークでうまく機能します。

また、固定高さを増やすか、height: auto;を設定し、必要に応じて上部と下部のパッドを調整することもできます。

Answer 2

-moz-box-sizingは問題を引き起こしているようです。

input[type="email"], input[type="password"], input[type="text"] 
{ 
    -moz-box-sizing: border-box; // remove this line 
    height: 25px; 
    margin-bottom: 30px; 
    padding: 20px; 
} 

行を削除すると入力サイズが大きく変わるので、CSSにボックスサイズの一般的なルールを追加できます。

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
} 

Answer 3

::-webkit-input-placeholder { /* Chrome, Safari */ 
    color: #aaa; 
    font-size: 18px; 
} 

:-moz-placeholder {   /* Firefox 18- */ 
    color: #aaa; 
    font-size: 18px; 
} 

::-moz-placeholder {   /* Firefox 19+ */ 
    color: #aaa; 
    font-size: 18px; 
} 

:-ms-input-placeholder {  /* Internet Explorer */ 
    color: #aaa; 
    font-size: 18px; 
} 

Answer 4

上部と下部のパディングを減らしてください。 垂直パディングがどのようにプレースホルダを覆うか。要素のheightを100%に設定することを忘れないでください。

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }