NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


float 된 <li>에 대한 list-style 은 어디 간 것일까?

본문 건너 뛰기

<li> 를 float 시키면 list-style 속성이 제거됩니다. 이것은 IE, NN, OP 공통적인 렌더링 결과로 표준 렌더링 방식임에 틀림없습니다. 그러나, <li> 에 대하여 display:list-item 속성을 추가해 주면 float 된 <li> 라 할지라도 list-style 이 적용됩니다. 그러나, 여기서 또 한번의 반전이 있군요. IE 는 <li> 가 float 되면 display:list-item 속성을 주더라도 list-style 이 렌더링 되지 않는다는 겁니다. 아래 예제는 <li> 요소에 float 을 주어 렌더링 테스트 했던 코드입니다. 이 코드를 다양한 브라우저에서 렌더링 해보면 유독 IE 에서만 list-style 이 렌더링 되지 않는다는 것을 알 수 있습니다. IE7버전 역시 마찬가지 결과 입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>float 된 li 에 대한 list-style 은 어디 간 것일까?</title>
<style type="text/css">
* { font: small "돋움", Dotum, AppleGothic, Sans-serif; margin: 0px; padding: 0px;}
ol { display:block; overflow:hidden; width:400px; padding-left:25px;}
ol li { display:list-item; float:left; width:200px;}
</style>
</head>
<body>
<ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
<li>넷</li>
<li>다섯</li>
<li>여섯</li>
<li>일곱</li>
<li>여덟</li>
<li>아홉</li>
<li>열 </li>
</ol>
</body>
</html>

분류: CSS | 2006년 9월 7일, 20:17 | 정찬명 | 댓글: 7개 |
트랙백URI - http://naradesign.net/wp/2006/09/07/56/trackback/

7개의 댓글이 있습니다.

  1. ifree1999 댓글:

    귀중한 시간 내어주셔서 감사했습니다.
    원인을 몰라서 굉장히 당황했었던 부분이였는데
    모두가 동등한 해결방법은 없지만 그래도 이유라도 알게되어서 다행이였습니다^-^

  2. My Blog 댓글:

    float 된 <li>에 대한 list-style 은 어디 간 것일까? …

    알찬 정보 감사합니다….

  3. 황용이 댓글:

    읍스 어찌 이런일이 ..
    해결방법은.? 사실 float 시키고 list-item이 필요한 경우가 극히 드물길한지만.
    내용 재미있었어요.

  4. 정찬명 댓글:

    황용이님은 일을 즐기면서 하실것 같아요. ^^

  5. 익명 댓글:

    ^ ^한수배워갑니다~ㅎ

  6. oyster 댓글:

    좋은 정보 감사해요^^

  7. 김세권 댓글:

    float 된 li 에 대한 list-style 은 어디 간 것일까?

    * { font: small “돋움”, Dotum, AppleGothic, Sans-serif; margin: 0px; padding: 0px;}
    ol { display:block; overflow:hidden; width:400px; padding-left:25px;}
    ol li { display:list-item; float:left; width:200px;}

    하나



    다섯
    여섯
    일곱
    여덟
    아홉

    이부분 확인해 보았는데요.. IE6,7이 안 먹혀요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님