Css 输入填充在firefox中剪切文本

在firefox中，当我使用bootstrap表单控件输入元素时，如果我填充输入元素，它会通过向内填充而不是在文本周围填充来剪切文本。它似乎只有在firefox中才有这种效果。此JSFIDLE演示了问题：

表单输入html：

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

---

这是我复制这个错误所能得到的最具体的结果。我也有点希望这只是一个与我完全相关的浏览器怪癖，但我无法检查是否存在，因为我正在单独工作并且只有一台机器。

添加高度属性，然后像下面那样应用填充。现在你可以看到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;
}

---

引导表单控件类默认获得固定高度。只需添加一个

高度：auto

到您的

。加入表单

选择器（以保持灵活性），并更改填充以获得原始效果，如

填充：14px 20px

请参见此处：
谢谢！你的两个答案都很好，几乎一样。我很高兴解决方案如此简单。我花了很长时间才发现最初是什么导致了这个错误！谢谢你！你的两个答案都很好，几乎一样。我很高兴解决方案如此简单。我花了很长时间才发现最初是什么导致了这个错误！
.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;
}