Nowrap inheritance error in IE6 (and earlier)

I have a task to make a carousel, which will contain several elements with an undefined width. So, the easiest way is to make all the elements in a line using CSS, and then do all the JS calculations and so on. Everything went well before testing it (error maker) IE6.

Here is an example that happens in browsers:

Safari (5.1.2), Firefox (10.0.2), Opera (11.62)

Internet Explorer (9.1)

Internet Explorer (6) (text in the span bump li field)

DebugBar about LI, ignoring the predefined white-space: normal rule - Internet Explorer 6

DebugBar SPAN, : - Internet Explorer 6

HTML:

<div class="carousel">
  <div class="box">
    <ul>
      <li>
        <span>Some text</span>
      </li>
      <li>
        <span>Some longer text</span>
      </li>
      <li>
        …
      </li>
    </ul>
  </div>
</div>

CSS, :

div.carousel {
  width: 700px; height:200px;
  }
  div.carousel div.box {
    width: 100%; height: 100%;
    overflow: hidden;
    }
    div.carousel div.box ul {
      display: block; 
      white-space: nowrap; /* to make all inside elements lay in row */
      }
      div.carousel div.box ul li {
        margin-left: 23px;
        width: 130px; height: 150px;
        display: inline-block;
        vertical-align: bottom;
        white-space: normal;
        }

IE6 :

div.carousel div.box ul li {
  display: inline;
  zoom: 1;
  }

jsFiddle