Question

我在flex布局中得到了一些数字输入，这些输入没有像Firefox中预期的那样大小，我不明白为什么。

Chrome中的结果：

Firefox中的结果：

正如你所看到的，XP行并没有在Chrome中溢出它的父级（没有水平滚动），但它在Firefox中有重要的溢出（带有水平滚动），在数字输入重叠相邻的标签文本。

相关的HTML＆amp;页面中的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

在做了一些研究之后，我认为我可以在这里得出的结论是flex已经知道跨浏览器存在各种问题和不同的行为，特别是Firefox。我发现了一些有用的线程可以导致各种修复/黑客以获得一致的结果。帮助我的一个主题是：Migrating from 1.5 to 1.6（向下滚动到评论）

回到你的问题，我能够使用两种不同的方式修复它，并且我能够在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中的min-width:0选择器添加简单的input规则。所以你的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://teamtreehouse.com/community/firefox-flexbox-not-working

希望这会有所帮助。干杯。

Firefox与Chrome中的输入宽度奇怪

1 个答案: