调整高度为100％的列表元素大小时的CSS宽度问题

Question

我在幻灯片中有一个高度为100％的图像列表。第一次呈现页面时，图像和周围列表元素的比例很好。但是，当我更改浏览器窗口的大小时，图像会完美调整大小，但list元素会在Firefox和Chrome中保持其宽度。因此它不会将其宽度更改为内容宽度。在Safari中它工作正常。你有什么问题要解决这个问题吗？

JSFiddle：http://jsfiddle.net/yvwtV/

CSS

    html, 
    body {
      height: 100%;
    }

    ul { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
    }

    .fs-wrapper {
      width: 100%;
      height: 100%;
      .fs-viewport {
        width: 100%;
        height: 100%;
        overflow: hidden;
        ul {
          width: auto;
          height: 100%;
          width: 9999px;
          li {
            height: 100%;
            float: left;
            display: inline-block;
            img {
              width: auto;
              height: 100%;
            }
          }
        }
      }
    }

HTML

<div class="fs-wrapper">    
  <div class="fs-viewport">
    <ul id="sliderName" class="slider">
      <li class="slide"><img width="150" height="100" src="image01.jpg"></li>
      <li class="slide"><img width="66" height="100" src="image02.jpg"></li>
      <li class="slide"><img width="150" height="100" src="image03.jpg"></li>
      <li class="slide"><img width="150" height="100" src="image04.jpg"></li>
    </ul>
  </div>
</div>