Internet Explorer的圆角
我正在这个网站http://www.claybrookanimalfeeds.co.uk/contact.php上工作，我想在右侧的商店开放时间框上获得圆角。
现在我已经设法让他们在Firefox，Chrome和Opera中工作，但由于某些原因，他们不在Internet Explorer中工作。 我尝试过不同的方法（包括PIE），但它们都不起作用。 要么我已经翻译了代码，以便它适合我的地方或它不工作。
任何帮助，将不胜感激。
这是我使用的CSS（这是相当长的），我想要的圆角的代码部分是在开放时间部分
@charset "utf-8";
/* CSS Document */
body {
background-color:beige;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}
#wrapper {
width:960px;
background-color:beige;
margin:0 auto;
}
/*Header*/
#header {
height:150px;
}
h1 {
text-align:center;
color:darkgoldenrod;
font-size:36px;
}
#p1 {
text-align:center;
color:darkgoldenrod;
font-size:18px;
}
/*Header End*/
/*Navigation Bar*/
#nav {
width:100%;
float:left;
margin: 0 0 1em 0;
padding:0;
background-color:darkgoldenrod;
border-bottom:1px solid #ccc;
}
#nav ul {
list-style:none;
width:800px;
margin:0 auto;
margin-left:100px;
padding:0;
}
#nav li {
float:left;
width:250px;
text-align:center;
}
#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:bold;
color:white;
border-right:1px solid #ccc;
}
#nav li:first-child a {
border-left:1px solid #ccc;
}
#nav li a:hover {
color:white;
background-color:blue;
}
/*Navigation Bar End*/
#content {
width:675px;
float:left;
margin-left:10px;
padding:10px;
}
/*Slideshow*/
#slide-show {
margin-left:150px;
}
#slide-images {
display:block;
margin:0px;
padding:0px;
width:300px;
height:224px;
overflow:hidden;
}
#slide-images li {
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}
#slide-images li img {
display:block;
background-color:#FFFFFF;
}
/*Slideshow End*/
/*Opening Times*/
#openingtimes
{
float:right;
height:200px;
width:200px;
background-color:white;
text-align:center;
border-style:solid;
border-width:medium;
border-color:black;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000;
}
/*Opening Times End*/
/*Form*/
#form {
float:left;
}
/*Form End*/
/*Sidebar*/
#sidebar {
width:200px;
float:left;
margin-left:10px;
margin-bottom:25px;
background-color:tan;
text-indent:10px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=5, offy=10)
}
#sidebar li {
list-style: none;
position: relative;
height: 30px;
padding:0 20px;
background-color:tan;
color: #45371E;
line-height: 20px;
cursor:pointer;
}
#sidebar li a {
text-decoration:none;
color: #45371E;
background-color:transparent;
display:block;
}
#sidebar li:hover {
background-color: #CD853F;
}
/*Sidebar End*/
/*Footer*/
#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
text-align:center;
}
#footer p {
padding:10px;
}
/*Footer End*/
border-radius属性在IE9=+上工作，所以如果你在IE8 <=上尝试它，它不会工作，最好使用jQuery
http://www.malsup.com/jquery/corner/
也可以使用这个网站查看各种浏览器的CSS属性支持，对于开发者来说非常方便
www.caniuse.com
所以ie9和以上版本支持这个http://caniuse.com/border-radius对于IE6 +，你可以使用polyfill：http://css3pie.com/
希望这可以帮助。
因此，对于使用CSSPIE的例子：
border: 1px solid black;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url(/pie/PIE.htc);