웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
익스플로러 8 이하에서 ul, li 태그 사용시 레이아웃 깨지며 list-style이 안보이는 문제
Last Modified : 2015-11-15 / Created : 2014-01-26크로스 브라우징 과정에서 IE 8(익스플로어 8) 이하의 브라우저는 li 태그의 레이아웃에 문제가 발생합니다. 왼쪽으로 쏠리고 list-style역시 보이지 않는데요... 자동으로 왼쪽 여백값이 지정이 되지 않기 때문입니다. 이를 수정하기 위해서는 간단하게 IE 8에 사용가능한 핵을 쓰면 간단하게 해결될 수 있습니다.
(참고로, 리스트 스타일은 좌측에 작은 무늬를 말하며 여러가지가 선택가능합니다.)
Example
<ul type="square">
<li>text</li>
</ul>
// IE 8 이슈를 수정하기 위해 아래의 코드를 추가합니다.
<style>
ul li {
*margin-left: 48px;
}
</style>
/* 리스트 스타일에서 선택가능한 옵션은 아래와 같습니다. */
ul li { list-style-image: url(’rankingis.jpg’); }
// 위 코드는 사용자 정의 이미지를 사용가능합니다 원하는 이미지의 경로를 입력합니다.
ul li { list-style-type: disc; }
</style>
위 예제는 disc를 값으로 사용했습니다.
(참고로, 리스트 스타일은 좌측에 작은 무늬를 말하며 여러가지가 선택가능합니다.)
Example
<ul type="square">
<li>text</li>
</ul>
// IE 8 이슈를 수정하기 위해 아래의 코드를 추가합니다.
<style>
ul li {
*margin-left: 48px;
}
</style>
/* 리스트 스타일에서 선택가능한 옵션은 아래와 같습니다. */
ul li { list-style-image: url(’rankingis.jpg’); }
// 위 코드는 사용자 정의 이미지를 사용가능합니다 원하는 이미지의 경로를 입력합니다.
ul li { list-style-type: disc; }
</style>
위 예제는 disc를 값으로 사용했습니다.
아래의 글도 찾고 계시지 않나요?