Firefox 与 Chrome 中奇怪的输入宽度

Question

我在 flex 布局中输入了一些数字，但在 Firefox 中的大小不符合预期，我不明白为什么。

Chrome 中的结果：

Firefox 中的结果：

如您所见，XP 行在 Chrome 中不会溢出其父级（无水平滚动），但在 Firefox（水平滚动）中它有显着溢出，位于数字之上输入重叠相邻的标签文本。

页面中相关的 HTML 和 CSS 是：

/**
 * The ".charsheet" prefix on each rule is automatically added
 */
.charsheet .sheet-flexbox-h input[type=number] {
    flex: 1 1 40%;
    margin-left: 5px;
}

.charsheet .sheet-flexbox-inline > label > span {
    white-space: nowrap;
    font-size: 89%;
}

.charsheet .sheet-flexbox-h > label {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.charsheet .sheet-flexbox-inline {
    display: inline-flex;
    width: 100%;
}

.charsheet .sheet-3colrow .sheet-2col:last-child {
    width: calc(66% - 5px);
}

.charsheet .sheet-body {
    display: block;
    overflow-x: visible;
    overflow-y: scroll;
    position: relative;
    flex: 1 1 auto;
}

.charsheet .sheet-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.charsheet {
    position: absolute;
    left: 0;
    height: calc(100% - 70px);
    width: calc(100% - 12px);
}

/**
 * CSS rules below are on the page, but not editable by me
 */
.ui-dialog .charsheet input[type=number] {
    width: 3.5em;
}

.ui-dialog .charsheet input {
    box-sizing: border-box;
}

<!-- I can only modify the descendants of .charsheet -->
<div class="charsheet tab-pane lang-en" style="display: block;">
    <div class="sheet-content">
        <div class="sheet-body">
            <!-- ... -->
            <div class="sheet-3colrow">
                <div class="sheet-col"><!-- ... --></div>
                <div class="sheet-2col">
                    <!-- ... -->
                    <div class="sheet-flexbox-h sheet-flexbox-inline">
                        <label>
                            <span data-i18n="current-experience-points">Current XP:</span>
                            <input type="number" name="attr_xp">
                        </label>
                        <label>
                            <span data-i18n="total-experience-points">Total XP:</span>
                            <input type="number" name="attr_xp_max">
                        </label>
                        <!-- etc... -->
                    </div><!-- /sheet-flexbox-h -->
                    <!-- ... -->
                </div><!-- /sheet-2col -->
            </div><!-- /sheet-3colrow -->
            <!-- ... -->
        </div><!-- /sheet-body -->
        <div class="sheet-footer"><!-- ... --></div>
    </div><!-- /sheet-content -->
</div><!-- /charsheet -->

我的完整 CSS 和 HTML 可以在 Roll20/roll20-character-sheets on GitHub 找到。我无法编辑的完整 CSS 可以在 Roll20.net 上找到（缩小版）

更新：我创建了一个小提琴来演示这个问题：https://jsfiddle.net/Lithl/az1njzn8/

Fiddle in Chrome, fiddle in Firefox

Answer 1

简答

将简单的min-width:0 规则添加到input 选择器

说明

在做了一些研究之后，我认为我可以在这里得出的结论是，flex 在浏览器中存在各种问题和不同的行为，特别是 Firefox。我发现了一些有用的线程，它们可以导致各种修复/黑客攻击以获得一致的结果。一个对我有帮助的帖子是：https://teamtreehouse.com/community/firefox-flexbox-not-working（向下滚动到 cmets）

回到您的问题，我能够使用两种不同的方式修复它，并且能够在 Chrome 和 Firefox 中产生一致的结果。它们都需要简单的 CSS 更改。

第一种方法

将您的 CSS 更改为以下内容：

.charsheet .sheet-flexbox-h input[type=text],
.charsheet .sheet-flexbox-h input[type=number],
.charsheet .sheet-flexbox-h select {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin-left: 5px;
}

我注意到你有 40% 作为 flex-basis 值，但无法真正弄清楚为什么你有这个值，也许它可能会在其他地方产生其他影响，将其更改为 auto。但这确实解决了这个问题。

第二种方法

向 CSS 中的 input 选择器添加一个简单的 min-width:0 规则。所以你的 CSS 看起来像：

.charsheet input[type=text],
.charsheet input[type=number] {
  display: inline-block;
  min-width:0;
  width: 165px;
  font-size: 12px;
  border: none;
  border-bottom: 1px solid black;
  border-radius: 0;
  background-color: transparent;
}

我从上面发布的链接中找到了这个有用的提示。再说一次，我没有一个非常具体的解释来解释为什么会这样，但它似乎完成了工作。

我建议您使用第二种方法，因为您正在设置宽度，因此它的影响可能很小。

使用第二种方法在这里工作：https://jsfiddle.net/az1njzn8/4/

Answer 2

我遇到了同样的问题，数字输入在 Chrome 和 Firefox 中的行为不同，不幸的是，Gurtej 的解决方案对我不起作用。

但对我有用的是设置一个默认宽度，该宽度将覆盖用户代理的默认宽度——即使宽度最终会被更复杂的规则和环境修改，包括百分比、最小宽度、最大宽度和 flexbox。

input[type="number"] {
    width: 100px;
}

比较 https://jsfiddle.net/pyu0h1r2/1/ 与 https://jsfiddle.net/pyu0h1r2/2/。