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瀏覽器奇怪的輸入寬度

回答

相關問題