html - 单选标签在 Safari 中不起作用

Question

以下示例适用于 FireFox、Chrome 甚至我的 iPhone，但不适用于 Windows 5.1.6 的 Safari。它可能适用于 Mac 的 Safari，但如果没有 Mac，则很难确认。虽然让它在 Mac 版 Safari 上运行就足够了，但我宁愿找到一个可以在 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 .

有什么帮助吗？

Answer 1

根据 wikipedia , safari for windows 的最后一个支持版本是 v5.1.7，并于 2012 年 5 月 9 日停产。因此，它肯定是 windows 平台上的死浏览器，并且在考虑新系统的情况下为其开发是毫无意义的努力。除非您的目标受众要求您支持此浏览器，否则您最好不要在开发时牢记这一点。