IE에선 보이는데, 크롬에서 배경이미지가 안 보이는 현상

<style>

  ul li {padding:0 0 10px 10px}

  ul li.01 {background:url('...') left top}

  ul li.02 {background:url('...') left top}

  ul li.03 {background:url('...') left top}

</style>

<ul ...>

  <li class="01">...</li>

  <li class="02">...</li>

  <li class="03">...</li>

</ul>

상기 코드로 작성되었는데, 이것이 MS 사의 인터넷 익스플로러(이하 IE)에서는 제대로 이미지가 보이는데..

크롬에선 안 보인다며 해결 의뢰가 들어왔습니다.

자, 이리저리 해 보았으나 원인을 잘 모르겠는거에요.

최초 작업자가 HTML 과 CSS 를 한 두 해 하는 것도 아니고, 나도 꽤나 오랜 세월 작업을 해 왔지만..

도저히 모르겠는거라.. ㅠ.

그래서 마지막으로, li 하나에 style="background:url('...') left top" 해 보니..

짜잔, 크롬에서도 IE 에서도 정상적으로 보이는겁니다.

아하.. class 이름으로 사용한 01, 02, 03 등이 문제.

class 이름은 숫자로 시작하면 안 된다는 전제가 있었는데, 가장 기본적인 것을 까먹은거에요.

30분 동안 뭔 짓거리를 한 거래냐.. ㅠ.

아무튼, 아래와 같이 문자로 시작하게 해 놓으니까 정상적으로 작동하네요.

<style>

  ul li {padding:0 0 10px 10px}

  ul li.c01 {background:url('...') left top}

  ul li.c02 {background:url('...') left top}

  ul li.c03 {background:url('...') left top}

</style>

<ul ...>

  <li class="c01">...</li>

  <li class="c02">...</li>

  <li class="c03">...</li>

</ul>

그러고 보니, 해당 작업자는 예전에도 이런류의 문제로 나를 골탕먹였었다는.. ㅠ.