输入填充在Firefox中剪切文本

Posted 2023-03-06

【中文标题】输入填充在Firefox中剪切文本

【英文标题】：input padding cutting out text in firefox

【发布时间】：2014-08-18 09:31:02

【问题描述】：

在 Firefox 中，当我使用引导表单控制输入元素时，如果我填充输入元素，它会通过向内填充而不是围绕文本来剪切文本。它似乎只在Firefox中具有这种效果。这个 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;

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

【参考方案1】：

添加高度属性，然后应用如下填充。现在您可以看到 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

【讨论】：

谢谢！您的两个答案都很棒，它们几乎相同。我很高兴解决方案如此简单。我花了很长时间才找出导致此错误的原因！

【参考方案2】：

默认情况下，Bootstrap 表单控件类具有固定高度。只需将height: auto; 添加到您的.join-form 选择器（以保持灵活性），并更改填充以获得原始效果，就像这样padding: 14px 20px;

请看这里：http://jsfiddle.net/x78Bh/

【讨论】：

谢谢！您的两个答案都很棒，它们几乎相同。我很高兴解决方案如此简单。我花了很长时间才找出导致此错误的原因！