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 -->

我可以在GitHub上的Roll20/roll20-character-sheets找到我的完整 CSS和HTML .我无法编辑的完整CSS可以在Roll20.net上实时(缩小)找到

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

Chrome中的小提琴,在Firefox中摇摆不定

Answer 1

在做了一些研究之后,我认为我可以在这里得出的结论是,min-width:0众所周知,浏览器中存在各种问题和不同的行为,特别是Firefox.我发现了一些有用的线程可以导致各种修复/黑客以获得一致的结果.帮助我的一个主题是:https://teamtreehouse.com/community/firefox-flexbox-not-working(向下滚动到评论)

回到你的问题,我能够使用两种不同的方式解决它,我能够在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%的input价值,但无法弄清楚为什么你有这个价值,也许它可能在其他地方改变它的其他影响flex.但这确实解决了这个问题.

第二种方法:flex-basis向autoCSS中的选择器添加一个简单的规则.所以你的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/

希望这可以帮助.干杯.