收音機標籤在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。

任何幫助？

來源

2017-09-25 Jahmic

僅供參考，在safari 11.0上正常運行。 –

@AuuragDaolagajao非常感謝。經過進一步的審查，看起來好像蘋果在幾年前就放棄了對Windows的Safari的支持。所以，這不是一個真正有效的測試瀏覽器。如果Safari 11.0是當前的Mac版本，請將其添加爲答案（也許稍微有一點說明），我會這樣標記。 – Jahmic

根據wikipedia，safari for windows的最新支持版本爲v5.1.7，並於2012年5月9日停止使用。因此，它確實是Windows平臺上的一個死亡瀏覽器，並且正在爲其開發新的系統是一個毫無意義的努力。除非您的目標受衆需要您支持此瀏覽器，否則最好不要記住這一點。

來源

2017-09-25 14:30:27

收音機標籤在Safari中不起作用

回答

相關問題