0

这在 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/

4

0 回答 0