在 Firefox 上输入文本错误，但在 Safari 或 Chrome 上没有

Question

由于某种原因，我之前可以使用的联系表突然无法正常工作。从本质上讲，输入字段似乎在 Firefox 上被禁用，即使它们不是。 Firebug 表明它们也没有被禁用，并且此行为仅适用于 firefox，不适用于 chrome 或 safari。

HTML

<div class="container-fluid contact-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footer-contact-h">TELL US ABOUT YOUR PROJECT</div>
            <form method="post" id="contact-form">
                <div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
                    <div class="form-group">
                        <input name="name" type="text" class="form-control" id="name" placeholder="Name" required="required" autocomplete="off">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
                    <div class="form-group">
                        <input name="company" type="text" class="form-control" id="company" placeholder="Company" required="required" autocomplete="off">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
                    <div class="form-group">
                        <input name="email" type="text" class="form-control" id="email" placeholder="Email" required="required" autocomplete="off">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
                    <div class="form-group">
                        <input name="phone" type="text" class="form-control" id="phone" placeholder="Phone" required="required" autocomplete="off">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
                    <div class="form-group">
                        <textarea name="message" class="form-control" id="message" required="required" placeholder="Details"></textarea>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">
                    <div class="form-group">
                        <input class="form-control contact-us-button" type="submit" value="CONTACT US">
                    </div>
                    <div class="contact-status">Message Received!</div>
                </div>
            </form>
        </div>
    </div>
</div>

我能够在 jsFiddle 中复制它：http://jsfiddle.net/tfdcgjh1/

Answer 1

问题似乎是 .form-group input 中的 padding。

删除它，然后 placeholder/text 回来。

Updated jsfiddle

Answer 2

您可以通过在 form-control class 中执行以下操作解决此问题：

.form-control {
    line-height: 1;
    height: auto;
    -moz-box-sizing: border-box;
}

查看 DEMO

在 Firefox 上输入文本错误，但在 Safari 或 Chrome 上没有

Input text bug on Firefox but not Safari or Chrome

html

css

firefox

twitter-bootstrap