Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

UL 태그, 익스플로러6의 경우

ul 안에는 li만 넣어야 합니다

정말 초보이던 시절에 ul의 자식 요소로 div를 넣고 렌더링이 제대로 되지 않아 당황하고 문제를 찾아 헤맨 끝에 해결한 기록입니다. 스펙상 ul 바로 밑에는 div를 넣으면 안 되는데, IE만 그런 줄 알기도 했죠. 너무나 초보적인 문제를 다룬 글이지만 기록용으로 남겨 둡니다. (2023-05-21)


익스플로러6는 아마도 UL 태그 안에 LIOL, UL 등 목록에 관련된 태그 외에는 허용하지 않는 것 같습니다.

예컨대,

<ul>
  <li>하하하</li>
  <div>이런!</div>
  <li>저런!</div>
</ul>

이런 식으로 만들어져 있는 태그가 있다면, 익스플로러6는

<UL><LI>하하하
<DIV>이런!</DIV>
<LI>저런! </LI></UL>

이렇게 이해하게 됩니다.

그 결과는? 아래 같은 계층 구조가 만들어지게 되죠.

그러면, 뭔가 문제가 생기겠죠.

어제 디자인하다가 이런 문제 때문에 곯머리를 앓았습니다.

UL 안에 DIV를 넣었기 때문임을 어렴풋이 감지하고, DIVLI로 교체하니까 문제가 깔끔하게 해결됐습니다.

UL과 익스플로러6 때문에 지금 고생하는 분이 있다면 한 번 UL 안에 LI 등 목록 관련 태그 외에 들어가 있는 것은 없는지 확인해 보세요.

물론, 제 정보가 부정확한 것이라 틀릴 수 있습니다만, 혹시 li에 문제가 있다면 이런 식으로 수정해 보는 것도 좋을 것입니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다