문제 상황
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이 작동하지 않으므로 display를 inline-block으로 처리해야 한다.
참고 링크