相关疑难解决方法(0)

我在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; …

出于某种原因,使用这样的显示Flex会导致项目在Mozilla中包装一个ontop.是否有一个原因？在Chrome中它工作正常,它们位于中间的一行.

火狐

铬

button.primary {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

svg {
  width: 15px
}

<button class="primary add-student">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.6 15.6 114.7 114.7" enable-background="new 15.6 15.6 114.7 114.7" xml:space="preserve" class="plus">
  <path d="M128.1 59.6c-1.5-1.5-3.4-2.3-5.5-2.3H88.6V23.5c0-2.2-0.8-4-2.3-5.5 -1.5-1.5-3.4-2.3-5.5-2.3H65.2c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v33.9H23.5c-2.2 0-4 0.8-5.5 2.3s-2.3 3.4-2.3 5.5v15.6c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h33.9v33.9c0 2.2 0.8 4 2.3 5.5 1.5 1.5 3.4 2.3 5.5 2.3h15.6c2.2 0 4-0.8 …