相关疑难解决方法(0)

在firefox中,当我使用bootstrap form-control输入元素时,如果我填充输入元素,它会通过向内填充而不是在文本周围填充文本.它似乎只在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;
}

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

我想要的是

铬合金 在 Chrome 上，输入文本看起来很正常。

怎么了

火狐

苹果浏览器

如您所见，输入文本在 Firefox 的底部被略微切断，而在 Safari 上则主要被切断。我该如何解决？

如果有人可以对此提供帮助，将不胜感激！

代码

HTML

        <div class="row page-header">
            <div class="col-xs-10">
                <div class="form-group">
                    <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
            </div>
        </div>

CSS

/*Add borders when hover or click on input boxes*/
input[type="text"] {
    outline: none;
    box-shadow:none !important;
    border: 1px solid white; /*make the borders invisble by turning same color as background*/
}

input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid #cccccc;
    border-radius: 8px;
}

/*Style input text …