html - IE7 が 100% の幅を設定して折り返すのはなぜですか要素？

Question

これは chrome と firefox では問題なく動作しますが、IE7 では各 LI アイテムがラップされます。

問題を解決するliアイテムに幅を設定できますが、幅は各アイテムで可変であり、「よりクリーンな」ソリューションを好みます...

私は何が欠けていますか？

CSS:

.container {
  height: 200px;
}
.container ul {
  display: block;
}
.container ul li {
  float: left;
  display: block;
  text-align: center;
  margin: 6px 6px 0 0;
}
.container ul li a {
  font-family: Arial;
  display: block;
  padding: 25px 9px 0 9px;
  border: 2px solid transparent;
  -moz-border-radius: 5px;
  border-radius: 5px;   
}
.container ul li a:hover {
  border: 2px solid rgb(227, 227, 227);
  background-color: rgb(243, 243, 243);
  background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(rgb(243, 243, 243)));
  background-image: -webkit-linear-gradient(top,white,rgb(243, 243, 243));
  background-image: -moz-linear-gradient(top,white,rgb(243, 243, 243));
  background-image: -ms-linear-gradient(top,white,rgb(243, 243, 243));
  background-image: -o-linear-gradient(top,white,rgb(243, 243, 243));
  background-image: linear-gradient(to bottom,white,rgb(243, 243, 243));
}
.container ul li a .name {
  display: block;
  width: 100%;
  color: rgb(0, 23, 58);
  font-size: 12px;
  text-transform: uppercase;
  margin: 22px 0 0 0;
}
.container ul li a .more {
  font-family: Arial;
  font-size: 12px;
  color: rgb(0, 23, 58);
  overflow: hidden;
  width: 36px;
  height: 36px;
  margin: 35px auto 17px auto;
}

HTML:

<div class="container">
    <ul>
        <li>
            <a href="[url]">
                <span class="name">Peter</span>
                <span class="more">More</span>
            </a>
        </li>
        <li>
            <a href="[url]">
                <span class="name">Paul</span>
                <span class="more">More</span>
            </a>
        </li>
        <li>
            <a href="[url]">                            
                <span class="name">Mary</span>
                <span class="more">More</span>
            </a>
        </li>
        <div class="clear"></div>      
    </ul>
</div><!-- END: container -->

http://jsfiddle.net/SCRtb/