Firefox与Chrome浏览器奇怪的输入宽度

我在Flex布局中有一些数字输入，这些输入在Firefox中没有像预期的那样大小，我不明白为什么。Firefox与Chrome浏览器奇怪的输入宽度

结果在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

来源

2017-04-10 Brian S

你可以创建一个简单的jsfiddle来重现问题吗？谢谢。 –

@GurtejSingh，今晚晚些时候我可以尝试这样做，尽管我怀疑这个问题可能是由与其他布局的交互引起的，所以我希望能够举个简单的例子。如果任何拥有Roll20帐户（或愿意创建一个帐户）的人想要检查完整版本，那就是Exalted 3e工作表。 –

如果您无法制作小提琴，则可以使用指向示例网站的链接。 –

后做一点研究，我认为我可以在这里得出的结论是，flex已知在各种浏览器中存在各种问题和不同的行为，特别是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％的flex-basis值，但无法真正弄清楚为什么你有这个价值，也许它可能有其他方面的影响其他地方将其更改为auto。但是这确实解决了这个问题。

第二种方法：将简单的min-width:0规则添加到您的CSS中的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://jsfiddle.net/az1njzn8/4/

希望这有助于。干杯。

来源

2017-04-12 06:04:06

Firefox与Chrome浏览器奇怪的输入宽度

回答

相关问题