收音机标签在Safari中不起作用

问题描述：

以下示例适用于FireFox，Chrome甚至是我的iPhone，但不适用于Safari 5.1.6。它可能适用于Mac版Safari，但没有Mac，很难确认。虽然在Mac上使用Safari可以满足要求，但我宁愿找到一个能够在Safari for Windows上正确显示此内容的解决方案。收音机标签在Safari中不起作用

样本：

#locations { 
 
    width: 500px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.tab-label { 
 
    z-index: 1; 
 
    width: 45%; 
 
    width: calc(50% - 20px); 
 
    color: gray; 
 
    background: black; 
 
    display: block; 
 
} 
 

 
.tab-label:first-of-type { 
 
    margin-left: 0; 
 
} 
 

 
.tab-content { 
 
    width: 100%; 
 
    -webkit-order: 1; 
 
    order: 1; 
 
} 
 

 
input[type=radio], 
 
.tab-content { 
 
    display: none; 
 
} 
 

 
input[type=radio]:checked+.tab-label { 
 
    color: white; 
 
    background: blue; 
 
} 
 

 
input[type=radio]:checked+.tab-label+.tab-content { 
 
    display: block; 
 
}

<div id="locations"> 
 
    <input type="radio" id="tab-tab1" name="group" checked="checked" /> 
 
    <label for="tab-tab1" class="tab-label">TAB1</label> 
 
    <div class="tab-content"> 
 
    TAB1 Content 
 
    </div> 
 
    <!--TAB1--> 
 
    <input type="radio" id="tab-tab2" name="group" /> 
 
    <label for="tab-tab2" class="tab-label">TAB2</label> 
 
    <div class="tab-content"> 
 
    TAB2 Content 
 
    </div> 
 
    <!--TAB2--> 
 
</div> 
 
<!--locations-->

这是有点基于折以下codepen sample，这也似乎对Safari浏览器 '问题' 的。

发布了一个有点相关的问题here。

任何帮助？

仅供参考，在safari 11.0上正常运行。 –

@AuuragDaolagajao非常感谢。经过进一步的审查，看起来好像苹果在几年前就放弃了对Windows的Safari的支持。所以，这不是一个真正有效的测试浏览器。如果Safari 11.0是当前的Mac版本，请将其添加为答案（也许稍微有一点说明），我会这样标记。 – Jahmic

答

根据wikipedia，safari for windows的最新支持版本为v5.1.7，并于2012年5月9日停止使用。因此，它确实是Windows平台上的一个死亡浏览器，并且正在为其开发新的系统是一个毫无意义的努力。除非您的目标受众需要您支持此浏览器，否则最好不要记住这一点。

收音机标签在Safari中不起作用

相关推荐