Question

在firefox中，当我使用bootstrap form-control输入元素时，如果我填充输入元素，它会通过向内填充而不是在文本周围填充文本。它似乎只在firefox中有这种效果。这个问题证明了这个问题：

表单输入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;
}

这与我可以复制此错误一样具体。我也希望它只是一个与我完全相关的浏览器怪癖，但我无法检查是因为我是单独工作而且只有一台机器。

Answer 1

默认情况下，Bootstrap表单控件类获得固定高度。只需在height: auto;选择器中添加.join-form（以保持灵活性），然后更改填充以获得原始效果，例如padding: 14px 20px;

见这里：http://jsfiddle.net/x78Bh/

Answer 2

添加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;
}

DEMO

输入填充在firefox中删除文本

2 个答案: