我只使用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之外，它似乎运行良好。
答案 0 :(得分：1)
如果隐藏input s，似乎在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>