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

互联网资源管理器的圆角

2 个答案: