본문 바로가기

웹 프론트엔드/잡다한 이슈

Safari에서 vertical-align을 통해 정렬시 정렬이 깨지는 이슈 해결

문제 상황

Safari(Mac, iOS)에서 vertical-align: top이 적용된 block 엘리먼트 안에 <sup> 엘리먼트와 다른 엘리먼트가 있으면 다른 엘리먼트가 하단으로 떨어져서 정렬이 깨지는 현상이 발생했다.

See the Pen Safari(iOS, Mac) vertical-align broken by arori (@arori) on CodePen.

위 코드를 Safari에서 실행시키면 아래와 같이 노출된다.

실험

공식 문서에 따르면 vertical-align 은 inline 요소와 table-cell 요소에만 적용되며, 상속 되지 않는 속성이다.

그러면 위 코드를 기준으로보면 inline-block인 wrapper에 vertical-align을 줘도 내부 요소의(텍스트 노드와 <span> 엘리먼트) 정렬은 기본값인 baseline이다. (wrapper 엘리먼트와 형제 요소와의 정렬에서 사용 됨.) 그런데 Safari에서 확인하면 <span> 엘리먼트만 약간 하단으로 내려가있다.

몇 가지 테스트를 해보았다.

  • wrapper 엘리먼트의 vertical-align를 변경.
    • vertical-align: top일때만 비정상 노출되고, 나머지는 정상적으로 노출.
  • <span>display:inline-block으로 변경.
    • 동일하게 비정상적으로 노출.
  • <span> 엘리먼트의 vertical-align을 변경.
    • vertical-align: top인 경우 정상적으로 노출. 다른 텍스트 노드가 vertical-align: top으로 정렬 되어있는 것으로 추정.
  • <sup> 태그 제거.
    • 정상적으로 노출.
  • <sup>의 vertical-align을 변경.
    • 정상적으로 노출.
  • <sup>를 다른 태그로 변경하고 vertical-align:super로 변경.
    • 동일하게 비정상적으로 노출. vertical-align:super가 주요 이슈 원인으로 추정.

실험 결과

  • wrapper 엘리먼트가 vertical-align: top이다.
  • wrapper 엘리먼트의 자식 엘리먼트이 vertical-align: super 속성을 가지고 있다.
  • vertical-align: super 속성을 가진 엘리먼트와 텍스트노드가 아닌 형제 엘리먼트가 존재한다.

위 조건을 만족하는 특수한 상황에서만 wrapper 엘리먼트의 텍스트 노드가 vertical-align: top으로 정렬이 되는 것으로 추정했다.

해결 방법

나의 경우에는 위에서 말한 특수한 상황만 우회적으로 피하는 것으로 해결했다. vertical-align: super인 요소를 vertical-align: top 으로 재정의 후 margin-top을 음수 값으로 지정해 정렬을 맞추어 마치 vertical-align: super로 동작하는 것 처럼 보이게 눈속임을 한 것이다. 물론 이 방식으로 inline요소에 margin-top이 작동하지 않으므로 displayinline-block으로 처리해야 한다.

참고 링크