简单的HTML/CSS标签导航在Safari 9中不起作用。为什么？

我不明白。 two-tabs-navigation here适用于Safari 7，Firefox 41适用于Chrome 46，但不适用于Safari 9（Mac）。没有错误信息，不知道它是什么。看起来第二个标签正在被选中;但DIV没有被显示。（更糟的是，相同的代码似乎工作here。）简单的HTML/CSS标签导航在Safari 9中不起作用。为什么？

CSS是这样的： tab {padding-left：2em; }

 /* navigation bar for maps/definition */ 
     .cctabs { 
      width: 100%; 
      margin: 100px auto; 
      font-family: Arial, sans-serif; 
     } 
     .cctabs input[type="radio"] { 
      opacity: 0; 
     } 
     .cctabs label { 
      color: #000; 
      cursor: pointer; 
      float: left; 
      margin-right: 2px; 
      padding: 0 7%; 
      font-size:13px; 
      font-weight:bold; 
      border: 1px solid #fff; 
      height: 15px; 
      background-color: #eee; 
     } 
     .cctabs label:hover { 
      background: -webkit-linear-gradient(#8a6a6a 0%, rgba(102,102,102,0.17) 100%); 
     } 
     .cctabs input:checked + label { 
      background: #fff; 
      color: #ebb704; 
      border-top:solid 2px #ebb704; 
      background-color: rgba(245, 245, 245, 0.7); 
     } 
     .cctabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .cctabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .cctabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .cctabs input:nth-of-type(4):checked ~ .panels .panel:last-child { 
      opacity: 1; 
      -webkit-transition: .3s; 
      /*position:relative;*/ 
      z-index:999; 
     } 
     .cctabs .panels { 
      float: left; 
      clear: both; 
      position: relative; 
      width: 100%; 
      background: #fff; 
     } 
     .cctabs .panel { 
      width: 100%; 
      opacity: 0; 
      position: absolute; 
      background: #fff; 
      padding: 4%; 
      box-sizing: border-box; 
     }    
    </style>

HTML这样的：

<div class="cctabs" style="height: 780px; width: 1135px;"> 
     <input checked id="one" name="tabs" type="radio"> 
     <label for="one" style="margin-left: 300px"><i class="fa fa-pencil-square-o"></i> Annual Display</label> 
     <input id="two" name="tabs" type="radio" value="Two"> 
     <label for="two"><i class="fa fa-magic"></i> Long-Term Display</label> 
     <div class="panels" style="padding-top: 10px;"> 
      <div class="panel" style="height: 730px; padding: 0; margin: 0;"> 
       <div style="width: 100%; height: 725px;"> 
        <div id="div_graph" style="width: 1115px; height: 650px;"></div> 
        <button id="updateLegend" style="margin-left: 1000px;">Show Legend</button> 
        <br clear="all" /> 
        <button id="showAll" style="margin-left: 1000px">Show All</button> 
        <button id="hideAll" >Hide All</button> 
       </div> 
      </div> 
      <div class="panel" style="height: 725px; padding: 0; margin: 0;"> 
       <div style="width: 100%; height: 725px;"> 
        <div id="div_graph2" style="width: 1115px; height: 650px;"></div> 
        <button id="updateLegend2" style="margin-left: 1000px">Show Legend</button> 
        <br clear="all" /> 
        <button id="showAll2" style="margin-left: 1000px">Show All</button> 
        <button id="hideAll2" >Hide All</button> 
       </div> 
      </div> 
     </div> 


     <script> 

      $(function() { 

       <?php include("graph_sea_level_1.js"); ?> 

       <?php include("graph_sea_level_2.js"); ?> 
      }); 

     </script> 

    </div>

感谢您的任何提示。

来源

2015-10-21 luftikus143

您的css选项卡菜单似乎使用一些奇特的css选择器来更改内容。看起来好像一些选择器在Safari中不受支持。 – berkyl