互联网浏览器的圆角

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属性的支持，对开发非常方便elopers

www.caniuse.com

Answer 2

所以IE9及以上版本支持此http://caniuse.com/border-radius 对于IE6 +，你可以使用填充工具：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);