[CSS] IOS (크롬,사파리) 높이 값 못가지는 부분 해결 (line-height : 1 + flex로 정렬)

line-height :1; 주기 전 / 후 (아이폰12)

 

 

| 문제상황

안드로이드 폰이나 윈도우에서 의도대로 잘 나오던 높이값이,

아이폰에서 (사파리,크롬)보면 자꾸 없어진 상태로 나옴

 

온갖 방법(flex만 주기, padding, margin, position주기...) 을 다 써본 결과

flex + line-height를 주면 해결된다는걸 알게 되어서 기록..

.player_info {
    position: absolute;
    top: 24%!important;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    /* line-height 없어서, IOS에서 높이값 못갖고 잘려보임*/
    line-height: 1;
}

구조

 

본인은 갤럭시+윈도우로만 사용중이라..

이런 오류발견할때마다 시간을 굉장히 소요하게 됨....

(아이폰 사길 잘했다는 생각 10000만번 든다...)

 

 

맥북에서 이상하게 나오는거 아니겠지...같은 사파리니까..괜찮겠지...? ㅠㅜㅠ (맥북살 여건은 안됌ㅠㅠ