css - Firefox の入力ボックスのサイズ変更でテキストが非表示になる

Question

入力に適用するときに Firefox に問題が-moz-box-sizing : border-box;あります。入力したテキストがどこかに隠れているか、オーバーフローしているかのようです。

ここで問題を確認できます:テスト(モバイル バージョンであるため、ウィンドウのサイズを 980px より小さいサイズに変更します)。

では、何が問題になるのでしょうか？私が見つけたすべてを試したので、機能したのは-moz-box-sizing : border-box;プロパティを削除することだけでした（：

Answer 1

高さを 100% に設定する必要があります。入力フィールドに次の CSS を試してみたところ、役に立ちました。

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

==> 理由は、20px のパディングが多すぎるためです。最初にパディングを削除してみてください。入力フィールドのテキストが突然表示されることがわかります ;-)。これを見た後、高さを 100% に設定しました。これで、パディングをたとえば 10px に減らすことができ、すべてがうまく見えます。

Answer 2

私はこの問題を抱えていましたが、最初はSafari 6以降でした。一部のテキスト入力はパディングの上/下を尊重しましたが、他のテキスト入力はそうではなく、短くなりました。ここで提案されているようにそれらすべてを使用height: 100%することで、それらはすべて一貫性を持ち、上部/下部のパディングを尊重しているように見えました. ただし、高さが数ピクセル余分に追加されました。

最終的に、私box-sizing: content-boxはそれらのすべてを実行することになりました。これにより、上部/下部のパディングが尊重されましたが、高さに余分な追加ピクセルはありませんでした。

ただし、これを追跡する必要がありましたwidth: calc(100% - <padding L+R>)が、これは欠点です。

Answer 3

input[type="text"] {
padding-top:0;
padding-bottom:0;
vertical-align:middle;
}