在Safari中无法工作的无线电标签
在Safari中无法工作的无线电标签
提问于 2017-09-25 12:03:31
下面的示例适用于FireFox、Chrome，甚至我的iPhone，但在SafariforWindows5.1.6中却不起作用。它可能适用于Mac的Safari，但如果没有Mac，就很难确定。虽然让它在Safari上工作就足够了，但我更希望找到一个在Safari for Windows上正确呈现的解决方案。
样本：
#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-->
这在某种程度上是基于下面的编码样本，它似乎在safari上也有“问题”。
在这里上发布了一个与此相关的问题。
有什么帮助吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-25 14:30:27
根据维基百科的说法，windows上支持的safari版本是v5.1.7，并于2012年5月9日停止使用。因此，毫无疑问，它是windows平台上的一个死气沉沉的浏览器，在开发时考虑到新的系统是毫无意义的努力。除非您的目标受众要求您支持此浏览器，否则您最好不要记住这一点进行开发。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46404788
复制相关文章
相似问题
腾讯云开发者
