Firefox 呈现 Bootstrap 3 `.form-inline` 和比 Chrome 更宽的文本输入答案

【问题标题】：Firefox renders Bootstrap 3 `.form-inline` and text inputs wider than ChromeFirefox 呈现 Bootstrap 3 `.form-inline` 和比 Chrome 更宽的文本输入
【发布时间】：2018-02-20 18:34:20
【问题描述】：

这适用于 Bootstrap 3.3.7

我有以下标记 - 全宽 (.container-fluid) 灰色背景，居中 (.container) 形式：

边框的内联样式用于调试目的，但如果将它们删除，结果是相同的。

<div class="homepage-signup-insights container-fluid" style="border:1px solid red;">

<div class="container" style="border:1px solid orange;">
    <div class="row">
        <div class="col-md-12 text-center">

            <form class="form-inline">
                <div class="form-group">
                    <h3><b>Sign up for Newsletter</b></h3>
                </div>

                <div class="form-group">
                    <input type="text" class="form-control input-lg" placeholder="Name" required>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-lg" placeholder="Company" required>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control input-lg" placeholder="Email" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg">Send</button>
            </form>

        </div>
    </div>
</div>

在 Chrome 60.0.3112.113 上，它看起来像这样 - 这就是我想要的：

在 Firefox 55.0.3 中它看起来像这样。如您所见，“注册时事通讯”文本的左侧有更多空间。但我不明白为什么，因为标记是相同的，并且没有 CSS 或特定于浏览器的 hack：

有人知道这是为什么吗？

应用于.homepage-signup-insights的Sass如下。删除它仍然会产生相同的错误（除了它当然没有样式出现）：

.homepage-signup-insights {
    background-color: #DEDEDE;
    padding: 20px 0 20px 0;

    .form-group {
        margin-right: 20px;
    }
    input[type="text"], input[type="email"] {
        border:0;
        border-radius: 0;
        background-color: #fff;
    }
}

【问题讨论】：

标签： html css twitter-bootstrap google-chrome firefox

【解决方案1】：

对此我想出的“解决方案”是将max-width: 220px 应用于 CSS 的输入：

input[type="text"], input[type="email"] {
    max-width: 220px;
    // ...
}

这是因为我注意到使用开发工具栏时，Chrome 为输入 (.input-lg) 提供了 220 像素的宽度，而 Firefox 为它们提供了 308 像素的宽度。 Firefox 中的额外宽度会导致内容分成 2 行。

不知道有没有人有更好的解决方案？即使您为输入提供size= 属性，Firefox 也会使它们比 Chrome 更宽。非常奇怪，在 Bootstrap 中它试图提供跨浏览器一致性，这不是我所期望的。

【讨论】：