Menu

메모용 개발 블로그

전체보기 > Develop > CSS3 >

구버전의 IE(8 이하)에서 시맨틱 태그 호환

2021-10-17 00:36:03

이 글은 이전 티스토리 블로그에서 글을 가져와서 일부 수정하였습니다.

https://kim-19.tistory.com/99

최초 작성일 : (2017. 2. 2. 09:39)

서론

현재 구버전의 IE 8 정도를 일상에서 사용하는건 심했습니다...

이게 도움이 될 일이 거의 없을 것 같기는 합니다.

HTML5를 지원하지 않는 구버전의 브라우저에서는 시맨틱 태그를모른다. 그렇기 때문에 자신이 원하는 웹페이지의 레아아웃대로 정렬이 안될 수도 있는데.

이를 '어느정도'는 원하는 대로 보여지게 하고 싶을 수도 있다.

웹 브라우저가 모르는 태그의 경우에는 disply값이 inline으로 설정된다.

하지만, 시맨틱 태그들의 경우에는 레이아웃을 나누는데 사용하므로 기본 값이 block이다.

이 점에서 호환이 안되고 레이아웃이 망가지는 문제가 발생하는데. 이에 대한 스타일을 명시해주면 된다.

header, nav, section, article, aside, fotter {
    display: block;
}

또한, 해당 스타일이 가장 우선순위가 낮게 하기 위해서 스타일의 상단에 위치시키도록 하자.