Firefox与Chrome的奇怪输入宽度 [英] Strange input widths in Firefox vs. Chrome

问题描述

我在Flex布局中有一些数字输入，这些输入的大小没有Firefox中预期的大小，而且我不明白为什么.

I've got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don't understand why.

Chrome中的结果:

The result in Chrome:

Firefox的结果:

The result in Firefox:

如您所见，XP行在Chrome中不会溢出其父级(无水平滚动)，但在Firefox的顶部(有水平滚动)它有显着溢出输入重叠的相邻标签文本.

As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has significant overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.

相关的HTML&页面上的CSS是:

The relevant HTML & CSS from the page is:

/**
 * 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可以在 GitHub上的Roll20/roll20-character-sheets .我无法编辑的完整CSS可以在 Roll20.net 上实时找到(最小化). >

My full CSS and HTML can be found at Roll20/roll20-character-sheets on GitHub. The full CSS that I can't edit can be found live (minified) at Roll20.net

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

Update: I've created a fiddle to demonstrate the problem: https://jsfiddle.net/Lithl/az1njzn8/

Chrome中的小提琴，推荐答案

简短答案

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

Short answer

Add a simple min-width:0 rule to the input selector

经过一些研究，我认为我可以得出的结论是，众所周知flex在各种浏览器(尤其是Firefox)中都有各种问题和不同的行为.我发现了几个有用的线程，这些线程可以导致各种修复/漏洞，从而获得一致的结果.一个对我有帮助的线程是: https://teamtreehouse.com/community/firefox-flexbox-无效(向下滚动至评论)

After doing a bit of research, I think the conclusion that I can make here is that flex has been known to have various issues and different behaviours across browsers, specially Firefox. I found a couple of useful threads that can lead to various fixes/hacks to have consistent results. A thread that helped me is : https://teamtreehouse.com/community/firefox-flexbox-not-working (scroll down to the comments)

回到您的问题，我能够使用两种单独的方法来解决它，并且能够在Chrome和Firefox中产生一致的结果.他们两个都需要简单的CSS更改.

Coming back to your question, I was able to fix it using two separate ways and I was able to produce consistent results in Chrome and Firefox. Both of them require a simple CSS change.

将CSS更改为以下内容:

Change your CSS to the following:

.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可能会产生其他影响.但这确实解决了问题.

I noticed that you had 40% as the flex-basis value but could not really figure out why you had this value, perhaps it may have other impacts elsewhere changing it to auto. But this does fix the issue.

向CSS中的input选择器添加简单的min-width:0规则.因此，您的CSS如下所示:

Add a simple min-width:0 rule to the input selector in your CSS. So your CSS would look like:

.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;
}

我从上面发布的链接中找到了这个有用的提示.再说一次，对于这种方法为什么有效，我没有很具体的解释，但似乎可以完成工作.

I found this helpful tip from the link I posted above. Again, I do not have a very concrete explanation as to why this works, but it seems to get the job done.

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

I would recommend you go with the second approach, as it may have minimal impact since you are setting the width.

使用第二种方法在这里进行摆弄: https://jsfiddle.net/az1njzn8/4/

Working fiddle here with second approach: https://jsfiddle.net/az1njzn8/4/

这篇关于Firefox与Chrome的奇怪输入宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！