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

Question

我正在使用border-radius.htc，试图在 IE7 中制作圆角。它部分工作，边框得到圆角，但不是图像，导致方形图像后面的圆形边框。

<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

Add overflow: hidden; for images

#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; 
}

The reason you have to do this is so then the corners of the images that are, in theory, overflowing from the div, are hidden.