在 Firefox 上输入文本错误，但不是 Safari 或 Chrome答案

【问题标题】：Input text bug on Firefox but not Safari or Chrome在 Firefox 上输入文本错误，但不是 Safari 或 Chrome
【发布时间】：2015-06-24 15:22:12
【问题描述】：

由于某种原因，我以前有效的联系表格突然无法正常工作。本质上，输入字段似乎在 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/

【问题讨论】：

在 Chrome 和 FF 中对我来说看起来一样：bootply.com/0iKPO8LDmu
我使用的是 Mac，JSFiddle 中显示的示例与我的实时站点相同，在 Firefox 上全乱了（没有占位符，无法输入文本等），但在 chrome 或野生动物园。
我知道这并不能回答您的问题，但我认为您没有可以让您查看所做更改的源代码控制？
我在问题中使用了 jsfiddle，FireFox 37.0.1 -windows7 64 bit- 我也发现了这个错误。
@freefaller，就我的代码而言，从它工作到现在没有任何变化，这就是为什么我认为这是一个错误，可能与代码无关。

标签： html css twitter-bootstrap firefox

【解决方案1】：

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

删除它并返回占位符/文本。

Updated jsfiddle

【讨论】：

【解决方案2】：

您可以通过在form-control 类中执行以下操作来解决它，变通：

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

查看DEMO

【讨论】：