Internet Explorer 的圆角

Question

我在这个网站上工作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*/

Answer 1

border-radius 属性在 IE9=+ 上有效，所以如果你在 IE8 <= 上尝试它，那么它不会有效，最好改用 jQuery

http://www.malsup.com/jquery/corner/

也可以使用这个网站检查各种浏览器的 CSS 属性支持，对开发者来说非常方便

www.caniuse.com

Answer 2

所以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);