純粋な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

inputを非表示にすると、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>