输入填充在firefox切出文本 [英] input padding cutting out text in firefox

问题描述

在firefox中，当我使用引导窗体控件输入元素时，如果我填充输入元素，它通过向内填充而不是在文本周围填充文本。它只是似乎在firefox有这种效果。此jsfiddle演示了此问题：

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:

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

这是具体的，我可以得到复制这个错误。我也希望它只是一个浏览器的问题完全与我相关，但我不能检查是因为我单独工作，只有一台机器。

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.

推荐答案

Bootstrap窗体控件类默认情况下获得固定的高度。只需在 .join-form 选择器（以保持灵活性）中添加 height：auto; 以获得原始效果，如此 padding：14px 20px;

The Bootstrap form-control class gets a fixed height by default. Just add a height: auto; to your .join-form selector(to keep flexibility), and change the padding to get the original effect, like this padding: 14px 20px;

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

这篇关于输入填充在firefox切出文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！