web-dev-qa-db-ja.com

Firefoxでテキストを切り取る入力パディング

Firefoxでbootstrap form-control input要素を使用する場合、入力要素をパディングすると、テキストの周囲ではなく内側にパディングすることでテキストが切り取られます。この効果があるのはfirefox。このjsfiddleは、問題を示しています。

http://jsfiddle.net/v76xB/

フォーム入力html：

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username">

CSS：

.join-form {
    padding: 24px; /*comment this out to see effect of padding */
    margin: 12px 0px;
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 300;
}

これは、このエラーを再現できるのとほぼ同じくらい具体的です。また、完全に自分に関係するブラウザの癖だと半信半疑ですが、個別に作業していて、マシンが1台しかないため、確認できません。

csstwitter-bootstrapfirefoxinputpadding
17
Jake Gabb

Bootstrap form-controlクラスはデフォルトで固定の高さを取得します。柔軟性を維持するために）height: auto;セレクターに.join-formを追加し、パディングを変更して取得します。このような元の効果padding: 14px 20px;

ここを参照してください： http://jsfiddle.net/x78Bh/

25
ThomasA

Heightプロパティを追加してから、以下のようにパディングを適用します。これで、Firefoxとchromeの両方が同じように動作することがわかります。

.join-form {
padding: 20px; /*comment this out to see effect of padding */
margin: 12px 0px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 300;
height:60px;
}

[〜＃〜]デモ[〜＃〜]

3
Suresh Ponnukalai