internet-explorer-7 - border-radius.htc 使边框变圆，但不是图像

Question

我正在使用 border-radius.htc ，试图在 IE7 中制作圆 Angular 。它部分工作，边框有圆 Angular ，但图像没有，导致方形图像后面有圆形边框。

<div id="container">
 <ul>
  <li>

    <img src="test.png">

  </li>
 </ul>
</div>

CSS

#container {
   position:relative;
   top: -20px;
   width:1000px;
   margin: 0 auto;
   margin-left:-10px;
}

#container li {
   float:left; 
   list-style:none; 
   margin: 0 5px; 
 }

#container ul li {
  width:180px; 
  height:200px;
}

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
}

Answer 1

为图片添加overflow: hidden;

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
   overflow: hidden; 
}

之所以必须这样做，是为了隐藏理论上从 div 溢出的图像 Angular 。