Question

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

这有点基于以下codepen sample，其中似乎也有关于safari的“问题”。

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

任何帮助？

Answer 1

根据wikipedia，最新支持的safari for Windows版本是v5.1.7，并于2012年5月9日停止使用。所以当然，它是Windows平台上的一个死浏览器，并为它开发新的系统考虑是一个毫无意义的努力。除非您的目标受众群体要求您支持此浏览器，否则您最好不要在不考虑这一点的情况下进行开发。

无线电标签在Safari中不起作用

1 个答案: