twitter-bootstrap 输入填充在 Firefox 中剪切文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24448991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input padding cutting out text in firefox
提问by Jake Gabb
In firefox when I use a bootstrap form-control input element, if I pad the input element it cuts out the text by padding inwards rather than around the text. It only seems to have this effect in firefox. This jsfiddle demonstrates the problem:
在 firefox 中，当我使用引导程序表单控件输入元素时，如果我填充输入元素，它会通过向内填充而不是在文本周围填充来剪切文本。它似乎只在 Firefox 中具有这种效果。这个 jsfiddle 演示了这个问题：
Form input html:
表单输入html：
<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username">
CSS:
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;
}
This is about as specific as I can get to replicate this error. I'm also half hoping it's just a browser quirk related completely to me, but I can't check being as I'm working individually and only have one machine.
这与我可以复制此错误的具体程度差不多。我也半希望这只是与我完全相关的浏览器怪癖，但我无法检查是否因为我是单独工作并且只有一台机器。
回答by ThomasA
The Bootstrap form-control class gets a fixed height by default. Just add a height: auto;to your .join-formselector(to keep flexibility), and change the padding to get the original effect, like this padding: 14px 20px;
Bootstrap 表单控件类默认获得固定高度。只需height: auto;在您的.join-form选择器中添加一个（以保持灵活性），并更改填充以获得原始效果，如下所示padding: 14px 20px;
See here: http://jsfiddle.net/x78Bh/
回答by Suresh Ponnukalai
Add height property then apply the padding like below. Now you can see both firefox and chrome will behave same.
添加高度属性，然后应用如下填充。现在您可以看到 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;
}
