CSS Issue: Hidden children stretching along Y-axis in IE with pure CSS?

I've been able to do this in Chrome and Firefox, and I thought I had it working in IE7 and IE8, but alas, I must've been dreaming.

Basically I have the following HTML:

<style>
div,li,ul {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
ul,li {  
    list-style: none;
}
div#container {
   display: inline-block;
   width: 600px;
   height: 120px;
   border: 1px solid lime;
   overflow: auto;
   position: relative;
}
div#container > ul {
   display: inline-block;
   width: auto;
   white-space: nowrap;
   vertical-align: top;
   position: absolute;
   left: 0px;
   top: 0px;
}
div#container > ul > li {
   display: inline-block;
   width: 100px;
   height: 100px;
   border: 1px solid red;
}
</style>
<div id="container">
   <ul>
      <li>Item 0</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
  开发者_如何转开发    <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
   </ul>
</div>

And I want it to look like this:

(from Firefox)

(from Chrome)

instead it looks like this:

(from IE8)

I'm at my wits end with this, and I'm considering doing some table layout hackery to fix it. But I'd rather not do that if I don't have to.

Nevermind, I got it... stupid IE incompatibilities. Basically it didn't like my selectors. So I had to add a class to the ul tag and do things that way.

<style>
div,li,ul {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
ul,li {  
    list-style: none;
}
div#container {
   display: inline;
   width: 600px;
   height: 120px;
   border: 1px solid lime;
   overflow: auto;
   position: relative;
}
div#container ul.first {
   display: inline;
   width: auto;
   white-space: nowrap;
   vertical-align: top;
   position: absolute;
   left: 0px;
   top: 0px;
}
div#container ul.first li {
   display: inline;
   width: 100px;
   height: 100px;
   border: 1px solid red;
}
</style>
<div id="container">
   <ul class="first">
      <li>Item 0</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
   </ul>
</div>