Safari에서 라디오 탭이 작동하지 않습니다.

아래 샘플은 FireFox, Chrome 및 iPhone에서도 작동하지만 Windows 용 Safari 5.1.6에서는 작동하지 않습니다. Mac 용 Safari에서도 작동하지만 Mac이 없으면 확인하기가 어렵습니다. Mac 용 Safari에서 작동하게해도 충분하지만, Windows 용 Safari에서 올바르게 렌더링 할 수있는 솔루션을 찾고자합니다.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의 기초한다.

다소 관련 질문이 게시되었습니다. here.

어떤 도움이 필요합니까?

출처

2017-09-25 Jahmic

FYI는 사파리 11.0에서 정상적으로 작동합니다. –

@AnuragDaolagajao 감사합니다. 더 심층적 인 검토 결과, 애플은 수년 전에 사파리에 대한 지원을 중단 한 것처럼 보입니다. 따라서 실제로 테스트 할 브라우저가 아닙니다. Safari 11.0이 현재 Mac 버전 인 경우이 설명을 답변으로 추가하면됩니다 (설명이 조금 더 있음). – Jahmic

윈도우 용 Safari의 마지막 지원 버전은 v5.1.7이며 2012 년 5 월 9 일에 단종되었습니다. Windows 플랫폼에서는 죽은 브라우저이므로 새 시스템을 염두에두고 개발하고 있습니다. 무의미한 노력이다. 타겟 고객이이 브라우저를 지원해야하는 경우가 아니면이를 염두에 두지 않고 개발하는 것이 좋습니다.

출처

2017-09-25 14:30:27

Safari에서 라디오 탭이 작동하지 않습니다.

답변

관련 문제