纯 HTML 和 CSS 选项卡在 Firefox 中显示不正确

Question

我只使用 CSS 和 firefox 创建了一个简单的选项卡界面。到目前为止它运行良好，尤其是在 Chrome 中，但是在 Firefox 中无法正确显示。

这里是 JS 小提琴：https://jsfiddle.net/5p5dnv43/

还有代码：

#tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-top: 0.35em;
  margin-right: none;
  padding: 0;
  height: calc(100% - 0.35em);
  width: 100%;
}

/* Style the radio group that corresponds to the tabs */   
#tabscontainer > [name="radiogroupfortabs"] {
  position: absolute; 
  visibility: hidden; 
}

/* Set Flexbox ordering of radio items within the #tabscontainer.  A unique rule has to be created for each tab. */
#tabscontainer > #radiofortab1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;}
#tabscontainer > #radiofortab2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;}
#tabscontainer > #radiofortab3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3;}
#tabscontainer > #radiofortab4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4;}

/* Style all radio group LABELS (by class) to look like tabs. */
#tabscontainer > [id^="tab-label"] {
  max-height: 18px;  
  margin: 4px 2px 0 0;
  display: inline-block;  
  padding: 5px 11px;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  border-style: solid;
  border-color: dimgrey;
  background-color: lightgrey;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* Style unselected tabs (INPUT element's label) when the pointer hovers over them.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */
#tabscontainer > [id^="tab-label"]:hover {
  background: #99ccff;
}

/* Style all of the content DIVs including setting DISPLAY to None to start with.*/
#tabscontainer > [id^="tab-content"] {
    -webkit-box-ordinal-group: 999;
    -webkit-order: 999;
    -ms-flex-order: 999;
    order: 999; /*Set to a high value*/
    display: none;    
    z-index: 2;
    width: 100%;
    height: calc(100% - 2.3em);
    overflow: hidden;    
    border: 0.5px solid dimgrey;
    background: white;
    margin-top: -3px;
}

/* Style the currently selected tab (checked INPUT element's label)*/
#tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4; /*brings to front*/
  margin-top: 0px;
  padding-top: 9px;
  background-color: white;
  border-color: dimgrey dimgrey white dimgrey;
  line-height:1em;
  font-weight: bold;
}

/* Display the content DIV that corresponds to the selected tab (because of the limitations of CSS selectors, this could not be done with a single rule.  A unique rule has to be created for each tab/tab content within the tab set.) */
#tabscontainer > #radiofortab1:checked ~ #tab-content1{display: block;}
#tabscontainer > #radiofortab2:checked ~ #tab-content2{display: block;}
#tabscontainer > #radiofortab3:checked ~ #tab-content3{display: block;}
#tabscontainer > #radiofortab4:checked ~ #tab-content4{display: block;}

<div id="lower-control-pane" class="row">
    <hr id="tabs-rule"/>
    <div id="tabscontainer">
    <!-- tab 1 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab1" checked/>
        <label id="tab-label1" for="radiofortab1">Status</label>
        <div id="tab-content1">
            <h2>Status</h2>
            <p>test context for first tab component</p>
        </div>  
    <!-- tab 2 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab2"/>
    <label id="tab-label2" for="radiofortab2">Notes</label>
    <div id="tab-content2">
        <h2>Notes</h2>
        <p>second tab test content</p>
    </div>  
    <!-- tab 3 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab3"/>
    <label id="tab-label3" for="radiofortab3">Names</label>
    <div id="tab-content3">
        <h2>Names</h2>
        <p>test context for third tab component</p>
    </div>  
    <!-- tab 4 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab4"/>
    <label id="tab-label4" for="radiofortab4">Log</label>
    <div id="tab-content4">
        <h2>Log</h2>
        <p>test context for fourth tab component</p>                 
    </div>   
</div>

所有选项卡标题都应显示在界面顶部。在 Chrome 中，这可以正常工作。你可以看到在 Firefox 中，只有第一个标签标题出现在它应该出现的位置。其他 3 个标签标题显示在界面下方。

我不确定是什么导致了这个问题，因为它似乎在 Firefox 以外的任何地方都能正常工作。

Answer 1

如果你隐藏了inputs，在 Firefox 和 chrome 中的行为似乎相同。您不需要在页面上显示输入，因此您可以使用 display: none; 隐藏它们

#tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-top: 0.35em;
  margin-right: none;
  padding: 0;
  height: calc(100% - 0.35em);
  width: 100%;
}


/* Style the radio group that corresponds to the tabs */

#tabscontainer > [name="radiogroupfortabs"] {
  display: none;
}


/* Set Flexbox ordering of radio items within the #tabscontainer.  A unique rule has to be created for each tab. */

#tabscontainer > #radiofortab1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

#tabscontainer > #radiofortab2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

#tabscontainer > #radiofortab3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

#tabscontainer > #radiofortab4 {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}


/* Style all radio group LABELS (by class) to look like tabs. */

#tabscontainer > [id^="tab-label"] {
  max-height: 18px;
  margin: 4px 2px 0 0;
  display: inline-block;
  padding: 5px 11px;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  border-style: solid;
  border-color: dimgrey;
  background-color: lightgrey;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


/* Style unselected tabs (INPUT element's label) when the pointer hovers over them.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */

#tabscontainer > [id^="tab-label"]:hover {
  background: #99ccff;
}


/* Style all of the content DIVs including setting DISPLAY to None to start with.*/

#tabscontainer > [id^="tab-content"] {
  -webkit-box-ordinal-group: 999;
  -webkit-order: 999;
  -ms-flex-order: 999;
  order: 999;
  /*Set to a high value*/
  display: none;
  z-index: 2;
  width: 100%;
  height: calc(100% - 2.3em);
  overflow: hidden;
  border: 0.5px solid dimgrey;
  background: white;
  margin-top: -3px;
}


/* Style the currently selected tab (checked INPUT element's label)*/

#tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4;
  /*brings to front*/
  margin-top: 0px;
  padding-top: 9px;
  background-color: white;
  border-color: dimgrey dimgrey white dimgrey;
  line-height: 1em;
  font-weight: bold;
}


/* Display the content DIV that corresponds to the selected tab (because of the limitations of CSS selectors, this could not be done with a single rule.  A unique rule has to be created for each tab/tab content within the tab set.) */

#tabscontainer > #radiofortab1:checked ~ #tab-content1 {
  display: block;
}

#tabscontainer > #radiofortab2:checked ~ #tab-content2 {
  display: block;
}

#tabscontainer > #radiofortab3:checked ~ #tab-content3 {
  display: block;
}

#tabscontainer > #radiofortab4:checked ~ #tab-content4 {
  display: block;
}

<div id="lower-control-pane" class="row">
  <hr id="tabs-rule" />
  <div id="tabscontainer">
    <!-- tab 1 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab1" checked/>
    <label id="tab-label1" for="radiofortab1">Workspace Status</label>
    <div id="tab-content1">
      <h2>Workspace Status</h2>
      <p>test context for first tab component</p>
    </div>
    <!-- tab 2 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab2" />
    <label id="tab-label2" for="radiofortab2">Notes</label>
    <div id="tab-content2">
      <h2>Notes</h2>
      <p>second tab test content</p>
    </div>
    <!-- tab 3 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab3" />
    <label id="tab-label3" for="radiofortab3">Global Names</label>
    <div id="tab-content3">
      <global-names-component (internalEditRequest)=globalNameEditRequest($event)></global-names-component>
    </div>
    <!-- tab 4 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab4" />
    <label id="tab-label4" for="radiofortab4">Log</label>
    <div id="tab-content4">
      <log-component></log-component>
    </div>
  </div>
</div>