在Firefox中输入填充被剪切的文本

Question

在火狐浏览器中，当我使用 Bootstrap 的表单控件输入元素时，如果对输入元素进行填充，它会通过向内填充而不是围绕文本填充来裁剪文本。这只在火狐浏览器中出现这种效果。这个 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;
}

这是我能够复制此错误的最具体描述。我也有一半的希望这只是与我完全相关的浏览器怪癖，但由于我在个人工作且只有一台机器，所以无法检查。

- Jake Gabb

Answer 1

Bootstrap的form-control类默认具有固定高度。只需将height：auto;添加到您的.join-form选择器中（以保持灵活性），并更改填充以获得原始效果，例如padding：14px 20px;

请参见此处：http://jsfiddle.net/x78Bh/

- ThomasA

---

谢谢！你们两个的答案都很好，几乎一样。我很高兴解决方案如此简单。一开始找出导致这个错误的原因花了我很长时间！ - Jake Gabb

Answer 2

添加height属性，然后像下面这样应用padding。现在你可以看到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;
}

演示

- Suresh Ponnukalai

---

谢谢！你们两个的答案都很好，几乎一样。我很高兴解决方案如此简单。我花了很长时间才找出最初导致这个错误的原因！ - Jake Gabb