Javascript SCS的Flexbox在Firefox上正常工作，但在其他浏览器（如Chrome、Edge等）上无法正常工作

我目前正在做一个项目，使用Gatsby.js和SASS进行样式设计。创建输入字段时，我们遇到了这样一个问题，即容器及其项仅在Firefox上正确显示，而在其他浏览器（如Chrome、Edge、IE等）上则无法正确显示。有趣的是，对于任何浏览器，它都能在mobile view上正确显示

我尝试了一些方法，在删除

display:flex

从pages SCSS文件中，它在所有使用的浏览器上都以相同的方式显示（当然，看起来很糟糕）。所有页面都从主/全局文件获取样式，但也有各自的SCSS文件

输入字段取自其组件：

<form onSubmit={this.handleSubmit} className={styles.formBox}>
            <fieldset className={styles.formGroup}>
                <label htmlFor="production">Text</label>
                <input
                    type="number"
                    name="production"
                    value={this.state.production}
                    onChange={this.handleInputChange}
                    className={styles.numberInput}
                    placeholder="Enter input"
                />
                <label htmlFor="unit">Text</label>
                <select
                    name="unit"
                    className={styles.selectionField}
                    value={this.state.unit}
                    onChange={this.handleInputChange}
                >
                    <option value="Value1" className={styles.optionField}>Value1</option>
                    <option value="Value2" className={styles.optionField}>Value2</option>
                </select>
                <label htmlFor="unit">Text</label>
                <select
                    name="weight"
                    className={styles.selectionField}
                    value={this.state.weight}
                    onChange={this.handleInputChange}
                >
                    <option value="value1" className={styles.optionField}>value1</option>
                    <option value="value2" className={styles.optionField}>value2</option>
                </select>
                <button type="submit" className="btn text-uppercase btn-primary--orange hover-effect btn-block-xs-only">Text</button>
            </fieldset>
        </form>

Firefox（它的外观：

铬：

---

我无法完全理解为什么会发生这种情况。我下一步可以尝试什么？

问题很可能与此有关

@media (max-width: 768px) {
    .form-group {
        flex-direction: column;

        .number-input,
        .selection-field {
           height: 55px;

---

你的Chrome视口可能更小，导致它们堆叠为列，这也解释了输入的裁剪高度

在我看来，你的Chrome屏幕截图的放大率超过了100%。不，两个屏幕截图都是以100%的放大率全屏拍摄的。这就是你发布的代码所产生的：你能至少发布HTML和CSS吗它可以运行？您可以轻松地将发布的代码转换为HTML和CSS。很抱歉，这对桌面上的全屏视图有何影响？因为它可以正确地显示在任何移动浏览器上。即使您在桌面上，您的视口也可能比您想象的小，从而导致问题。请记住，视口不是您的屏幕大小是必需的。因此Firefox中的视口与其他浏览器（Chrome、Edge等）之间存在差异？这是可能的。您是否检查了每个浏览器上的视口大小？我检查了不同浏览器的视口大小，并且每个浏览器的视口大小相同（1920x969）。是否flexbox在Firefox上的工作方式与其他浏览器不同/更好？因为如前所述，如果我切换到移动视图，它在所有浏览器上都能正常工作。（如果我从表单组中删除display:inline flex，它在Firefox上的外观与在其他浏览器上的相同。因此，它似乎只在Firefox上工作）。

@media (max-width: 768px) {
    .form-group {
        flex-direction: column;

        .number-input,
        .selection-field {
           height: 55px;