Закругленные углы для интернет-исследователя

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 + вы можете использовать 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);