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>
귀중한 시간 내어주셔서 감사했습니다.
원인을 몰라서 굉장히 당황했었던 부분이였는데
모두가 동등한 해결방법은 없지만 그래도 이유라도 알게되어서 다행이였습니다^-^
float 된 <li>에 대한 list-style 은 어디 간 것일까? …
알찬 정보 감사합니다….
읍스 어찌 이런일이 ..
해결방법은.? 사실 float 시키고 list-item이 필요한 경우가 극히 드물길한지만.
내용 재미있었어요.
황용이님은 일을 즐기면서 하실것 같아요. ^^
^ ^한수배워갑니다~ㅎ
좋은 정보 감사해요^^