개발자 사이트들을 구경하던중
https://developers.line.biz/en/
라인 개발자사이트에서 flex속성을 사용하고있길래 ie는 얼마만큼 맞췄을지 궁금해서 한번 살펴봤다!
Chrome
IE
한눈에 바로 들어왔던 건 로고의 정렬이였다.
속성을 살펴보니, 부모 요소가 flex 속성을 가지고 있었고
로고 이미지를 감싸고 있는 a 태그에서
margin-top, margin-bottom:auto 속성을 사용해 수직 중앙 정렬을 하고있었다.
Flex 속성을 사용할 경우 IE에서 겪게 되는 케이스 중 하나다.
(예전에 비슷한거 겪어봄. 아래에 기재)
개발자 도구로 살펴보니 IE에서는 상,하단 마진 영역이 없었다.
해결법은 간단했다.
a 태그에 height값을 부여했더니 해결됐다.
margin:auto 가 flex 아이템에 어떻게 영향을 주는가?
flex 아이템에 auto 속성을 사용하면 해당 아이템은 여백이 적용되는 방향에 따라 지정된 여백을 자동으로 확장하여 flex container의 추가 공간을 차지한다.
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
위 포스팅을 참고해보면,
flex container 내 item인 a태그는 여백을 자동으로 확장하여
margin을 auto로 조정할 공간자체가 없기때문에 heihgt를 지정해줌으로써
auto가 동작할 수 있도록 해주면 되는것이다.
근데 문제는
chrome은 잘 나오는데 왜 ie에서만..?ㅋㅋㅋ
서치하다가 나도 겪었던 이슈를 보게돼서 요것도 함께 포스팅 해놓는다.
약간 다른 이슈긴한데..
컨텐츠영역에
display:flex, flex-direction:column, min-height:100vh 를 속성을 주고
컨텐츠 영역 내 footer로 사용할 엘리먼트에 margin-top:auto 속성을 주면 chrome에선 동작하지만, IE에서는 min-height속성을 무시해버린다.
이때 min-height와 함께 min-height보다 작은 수치의 값을 적용해주면 정상 동작한다. (100px,500px...)
요건 ie에서 flex속성과 min-height를 함께 사용했을 때 일어나는 현상이다.
https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
요 포스팅을 참고하여 위 현상에대해 좀 더 딥하게 파보기로하고
오늘은 이까지~
